序 一 








不 管 是 美国 的 工业 互联 网 ， 还 是 中 国 的 互联 网 + ， 这 些 都 表明 互联 网 正在 催生 新 一 轮 的 产业 革命 。 移 动 App 在 不 断 地 连接 “人 ”， 创 造 一 个 个 新 的 基于 人 的 应 用 
场景 ; 物 联 传感器 在 不 断 地 连接 “ 物 ”， 也 在 创造 一 个 个 新 的 基于 物 的 应 用 场景 。 连 接 带 来 了 大 的 并 发 量 和 数据 量 ， 从 而 又 促使 了 云 计算 和 大 数据 这 种 分 布 式 计算 
方式 和 数据 处 理 方式 的 普及 。“ 云 大 移 物 ”为 代表 的 新 一 代 信息 技术 是 当今 互联 网 技术 的 核心 ， 它 们 正在 形成 一 种 新 的 体系 。 正 如 时 任 工 业 和 信息 化 部 副 部 长 杨 学 
山 先生 在 中 国 新 一 代 IT 产 业 推 进 联盟 成 立 仪式 上 用 “五 个 新 ”做 了 精辟 总 结 : 信息 技术 正在 新 的 体系 结构 (新 体系 ) ; 新 的 技术 体系 形成 了 新 的 能 力 (新 能 力 ) ; 
在 新 的 能 力 支撑 下 正在 形成 许多 新 的 应 用 模式 (新 模式 ) ; 新 的 应 用 模式 正在 导致 新 的 竞争 格局 (新 格局 ) ; 新 体系 、 新 能 力 、 新 模式 和 新 格局 一 起 在 推动 人 类 社 
会 迈 入 新 的 发 展 阶段 (新 阶段 ) 。 











在 新 的 互联 网 时 代 ， 企 业 级 IT 应 用 正在 面临 颠覆 性 的 变革 : 从 单机 架构 走向 分 布 式 架构 ， 从 瀑布 式 开 发 走向 迭代 式 开 发 ， 从 大 模块 走向 微服 务 ， 从 大 项 目 交付 
走向 持续 交付 。 这 一 切 都 需要 企业 IT 开发 与 应 用 的 模式 要 适应 互联 网 环境 下 敏捷 开发 、 快 速 迁 代 和 弹性 扩展 的 需求 。 可 以 说 ， 企 业 级 IT 应 用 已 经 到 了 一 个 不 得 不 换代 
的 关键 时 期 。 在 新 的 互联 网 基础 设施 平台 上 ， 进 行 原生 云 应 用 的 开发 ， 已 是 企业 IT 的 必然 选择 。 








微 信 确 实 是 一 个 伟大 的 产品 ， 它 不 仅 成 为 我 们 每 一 个 人 日 常 沟通 交流 的 工具 ， 也 成 为 了 整个 社会 的 信息 基础 设施 。 在 国内 ， 由 于 微 信 几乎 在 实时 连接 每 一 个 
人 ， 它 自然 也 成 了 一 个 最 强大 的 “入 口 ”。 公 众 号 、 服 务 号 和 企业 号 的 诞生 已 经 让 微 信 在 开始 连接 后 端的 企业 系统 ， 但 是 这 些 后 端的 系统 还 可 能 是 过 去 那些 笨重 的 
遗留 系统 。 如 何 真正 实现 互联 网 化 的 即 连 即 用 ， 或 许 应 用 号 才 开始 真正 打开 一 个 企业 级 的 应 用 市 场 ， 我 们 正装 首 以 待 。 业 界 一 直 有 一 个 说 法 : “企业 级 应 用 太 重 ， 


























有 良好 的 架构 设计 ， 系 统 会 有 大 量 的 重复 开发 和 重 硬 ， 复 杂 性 也 会 随 着 需求 的 增加 而 指数 级 增长 ， 到 一 定时 候 不 得 不 推倒 重 来 。 今 天 的 大 多 数 企 业 信 息 化 还 处 于 这 
种 手工 作坊 式 的 “复杂 ”小 涡 中 。 大 道 至 简 ， 但 “ 简 ” 需 要 好 的 架构 设计 。 但 愿 企业 号 的 “小 程序 ”和 “ 巧 应 用 ”能 为 我 们 下 一 代 信息 化 打开 一 扇 新 的 窗户 。 





熊 普 江 和 谢 宇 华 分 别 是 我 们 第 二 届 和 第 三 届 互 联网 CIO-CTO 班 学 员 。 特 别 是 普 江 ， 他 本 人 是 腾讯 的 架构 师 ， 对 互联 网 架构 有 深刻 的 认识 ， 对 腾讯 的 所 有 产品 都 
有 足够 的 了 解 。 我 很 高 兴 能 为 他 们 俩 的 这 本 书 作 序 ! 可 以 说 ，《 小 程序 、 巧 应 用 》 这 本 书 是 这 个 时 代 的 及 时 雨 ， 它 不 仅仅 告诉 我 们 应 用 号 小 程序 的 开发 和 使 用 ， 也 
为 我 们 下 一 代 信息 化 模式 转型 做 了 一 个 非常 好 的 铺垫 。 











姚 乐 ， 北 大 CIO 时 代 学 院 院 长 


2016 年 11 月 28 日 


序 二 


“触手 可 及 、 用 完 即 走 ”， 作 为 用 户 当然 会 期 待 这 样 的 应 用 产品 。 微 信 小 程序 正 是 这 样 的 产品 ， 它 面 对 月 活 超过 8 亿 用 户 的 微 信 生态 为 服务 开发 者 推出 一 个 方便 
快捷 地 链接 用 户 的 开发 平台 。 


从 小 程序 对 外 发 布 内 测 ， 我 身边 就 有 很 多 人 在 关注 。 当 时 我 创办 的 1024 学 院 也 计划 邀请 微 信 的 专家 来 上 公开 课 ， 为 此 我 还 联系 了 本 书 作 者 普 江 ， 他 当时 说 公测 
期 ， 内 部 人 士 不 好 对 外 发 声 ， 正 式 上 线 后 可 以 安排 。 


没有 想到 普 江 自己 藏 着 大 招 ， 从 内 测 开始 到 现在 不 到 两 个 月 ， 便 给 我 传 了 一 份 书稿 ， 让 我 写 序 。 





认识 普 江 很 多 年 ， 知 道 他 不 仅 是 技术 专家 ， 也 是 热心 公益 、 乐 于 分 享 助人 的 好 朋友 。 就 如 他 自己 所 言 ， 因 为 太 多 的 朋友 找到 他 问 ， 促 使 他 开始 准备 这 本 书 ， 普 
江 的 初 心 还 是 要 帮助 朋友 ， 帮 助 小 程序 的 开发 者 。 





这 本 书 可 能 会 是 第 一 本 微 信 小 程序 的 实战 类 书籍 。 感 谢 普 江 、 宇 华 两 个 作者 夜以继日 的 辛苦 努力 ， 能 让 广大 开发 者 在 第 一 时 间 拿 到 详实 的 开发 指南 和 参考 资 
料 。 





我 们 也 很 期 待 在 微 信 生态 里 出 现 一 批 高 质量 的 微 信 小 程序 ， 为 用 户 提供 更 多 、 更 好 、 更 便捷 的 服务 。 





吴华 胸 ，iTechClub (互联 网 精英 俱乐部 ) 理事 长 ，1024 学 院 创始 人 








随 着 移动 互联 网 的 兴起 ， 互 联网 作为 一 种 信息 技术 在 传统 社会 与 传统 工业 中 发 挥 的 作用 ， 越 来 越 强大 ， 互 联网 与 整个 社会 运作 正在 加 速 深度 融合 。 “互联 网 
+” 的 趋势 显而易见 ， 政 府 、 社 会 组 织 、 企 业 以 及 个 人 ， 都 对 移动 互联 网 时 代 的 融合 或 转型 充满 期 待 而 又 心怀 志 堪 : 移动 化 的 场景 如 何 结合 ”是否 有 足够 的 移动 应 用 
开发 能 力 ? 即便 场景 与 能 力 都 满足 ， 是 否 能 应 对 获取 用 户 成 本 、 打 开 频 率 等 移动 互联 网 运营 的 巨大 挑战 ? 





好 在 我 们 有 微 信 ! 这 是 一 款 为 移动 时 代 而 生 ， 让 世界 互联 网 震惊 的 中 国 创新 应 用 。 经 过 5 年 多 的 发 展 ， 微 信 已 有 超过 8 亿 月 活用 户 且 仍 在 不 断 进化 与 演进 ， 是 移 
动 时 代 当 之 无 愧 的 超级 App 王 。 更 加 幸运 的 是 ， 腾 讯 的 微 信 团队 源源 不 断 地 将 微 信 的 能 力 开放 出 来 ， 为 我 们 提供 了 融合 与 转型 的 超 强 连 接力 。 





2016 年 1 月 在 广州 举办 的 微 信 公 开课 上 ，“ 微 信之 父 ” 张 小 龙 在 他 演讲 的 最 后 一 部 分 ， 宣 布 将 推出 “应 用 号 ”。 人 小 龙 提 到 : “我 自己 当 了 多 年 程序 员 ， 我 觉得 
我 们 应 该 为 开发 团体 做 一 些 事 情 。 ”至 于 “应 用 号 ”的 样子 ， 小 龙 当时 的 大 概 表述 是 “类 似 于 公众 号 ， 但 比 公众 号 更 便捷 、 更 好 找 ， 有 更 容易 使 用 的 形态 ”。 这 就 
是 微 信 人 小 程序 的 由 来 。 











历时 8 个 多 月 ， 在 2016 年 9 月 21 日 ， 微 信 小 程序 公布 开启 “内 测 ”。 随即 这 个 内 测 消息 便 刷 爆 了 朋友 圈 ， 我 在 接 下 来 的 数 天 内 便 接 到 不 下 30 个 “ 求 内 测 邀 请 
码 ” 需 求 留言 ， 小 程序 火爆 程度 可 见 一 斑 。 由 于 微 信 团 队 首 批 仅 开放 了 200 个 内 测 号 ， 物 以 稀 为 贵 ， 网 络 上 不 久 就 有 传言 : 转让 某 个 带 小 程序 功能 的 微 信 号 ， 账 号 有 
30.7 万 女 粉 丝 ， 起 拍 价 300 万 。 





2016 年 11 月 3 日 ， 小 程序 正式 开放 公测 。 我 再 次 在 朋友 圈 刷 屏 中 体验 到 了 “小 程序 ”的 火爆 ， 感 受到 了 开发 者 、 企 业 以 及 市 场 对 微 信 小 程序 的 好 奇 、 疑 惑 ， 同 
时 也 感受 到 大 家 在 移动 浪潮 中 拥抱 变化 的 期 待 。 


微 信 官方 页 面 指出 : “小 程序 可 以 在 微 信 内 便捷 地 获取 和 传播 ， 同 时 具有 出 色 的 使 用 体验 。” 张 小 龙 在 小 程序 内 测 首发 当天 ， 也 在 朋友 圈 给 出 了 解释 : 小 程序 
是 一 种 不 需要 下 载 安装 即 可 使 用 的 应 用 ， 它 实现 了 应 用 “触手 可 及 ”的 梦想 ， 用 户 扫 一 扫 或 者 搜 一 下 即 可 打开 。 这 也 体现 了 “用 完 即 走 ” 的 理念 ， 用 户 无 须 担心 安 
装 应 用 过 多 的 问题 。 应 用 将 无 处 不 在 ， 随 时 可 用 ， 但 又 无 须 安装 卸载 。 








移动 互联 网 时 代 的 微 信 应 用 不 可 或 缺 ， 微 信 小 程序 切合 了 时 代 需 要 ， 襄 无 疑问 会 成 为 政府 、 组 织 机 构 、 企 业 以 及 开发 者 必 和 争 的 互联 网 应 用 场景 。 微 信 小 程序 必 
将 再 一 次 扩展 微 信 强大 的 “连接 力 ”， 帮 助 我 们 解决 现 有 服务 痛 点 ， 或 者 发 气 、 衍 生出 新 的 商业 模式 ， 帮 助 行业 、 企 业 以 及 政府 机 构 改善 服务 或 实现 “互联 网 +” 转 
型 。 


感谢 微 信 团 队 ， 为 我 们 带 来 微 信人 小 程序 这 个 新 生 事物 。 绝 大 部 分 场景 下 ， 不 用 单独 开发 App 的 时 代 来 临 了 。 那 么 如 何 开发 小 程序 ”如 何 将 现 有 的 服务 或 场景 与 
小 程序 结合 ? 





由 于 小 程序 是 新 生 事物 ， 基 本 上 多 数 人 都 无 经 验 可 言 。 与 小 龙 一样 ， 我 觉得 此 时 有 必要 为 所 有 对 小 程序 感 兴趣 、 有 期 待 的 朋友 ， 提 供 一 些 有 关 小 程序 开发 的 指 
南 ， 这 是 一 件 非常 有 意义 的 事情 。 











由 于 我 在 工作 上 与 微 信 团队 联系 紧密 ， 沟 通 频繁 ， 有 近水楼台 优势 ;而 且 对 腾讯 业务 有 相对 全 面 的 了 解 ， 熟 悉 丰 富 的 应 用 场景 ， 学 习 了 大 量 小 程序 项 目 案例 。 








自 小 程序 内 测 开启 以 来 ， 我 们 更 是 夜以继日 ， 同 步 研读 与 理解 微 信 团 队 的 文档 ， 梳 理 开 发 逻辑 ， 测 试 各 个 场景 案例 ， 希 望 尽早 奉献 给 大 家 一 本 从 入 门 到 精通 的 
小 程序 开发 大 全 。 


我 们 尝试 通过 本 书 将 我 们 的 先 发 优 势 发 挥 出 来 。 由 小 程序 的 框架 、 语 法 、 函 数 及 API 开 始 ， 结 合 丰富 实用 的 案例 ， 帮 助 大 家 熟练 掌握 小 程序 的 开发 与 应 用 ， 并 探 
讨 小 程序 的 适用 范围 以 及 未 来 优化 演进 的 方向 。 


本 书 读者 对 象 包括 : 
-前端 开发 工程 师 
: 微 信 应 用 开发 者 
-移动 开发 爱好 者 


© 计算 机 相关 专业 的 学 生 


如 何 阅读 这 本 书 


作为 “开放 连接 体系 ”的 一 环 ， 微 信 团 队 为 小 程序 提供 连接 标准 与 规范 ， 最 大 限度 地 降低 了 开发 门槛 ， 但 开发 小 程序 还 是 需要 一 定 的 “专业 开发 能 力 ” 与 程序 
开发 的 理解 力 。 


微 信 小 程序 的 开发 是 基于 框架 的 。 因 此 ， 开 发 者 首先 要 理解 “框架 (framework) 的 概念 。 


从 软件 设计 角度 ， 框 架 是 一 个 可 复 用 的 软件 架构 解决 方案 。 框 架 规定 了 应 用 的 体系 结构 ， 阅 明 软 件 体 系 结构 中 各 层次 间 及 其 层次 内 部 各 组 件 间 的 依赖 关系 、 责 
任 分 配 和 控制 流程 ， 框 架 表 现 为 一 组 接口 、 抽 象 类 以 及 实例 间 协 作 的 方法 。 


框架 一 般 是 成 熟 、 稳 健 的 ， 可 以 处 理 系统 中 很 多 的 细节 问题 ， 比 如 ， 事 物 处 理 、 安 全 性 、 数 据 流 控 制 等 问题 。 框 架 一 般 都 为 多 人 所 用 ， 所 以 结构 很 好 ， 扩 展 性 
也 很 好 ， 而 且 它 是 不 断 升级 的 ， 可 以 直接 享受 别人 升级 代码 带 来 的 好 处 。 








显然 ， 框 架 极 大 地 方便 了 开发 者 ， 减 少 了 开发 代码 量 并 提升 了 代码 质量 。 





微 信 团 队 为 小 程序 提供 的 开发 框架 为 MINA 框 架 ， 它 类 似 于 淘宝 Weex、Vue 框 架 。MINA 框 架 经 过 大 量 底层 的 优化 设计 ， 有 着 接近 原生 App 的 运行 速度 ， 对 
Android 端 和 iOS 端 做 到 了 高 度 一 致 的 呈现 ， 具 有 完备 的 开发 和 调试 工具 。 














微 信 团 队 为 小 程序 的 开发 者 提供 了 包含 UI 界 面 、 社 交 与 支付 、 语 音 、 多 媒体 、LBS 服 务 、 手 机 硬件 、 网 络 传输 等 基础 能 力 。 功 能 丰富 且 实 用 ， 可 以 覆盖 绝 大 部 分 
移动 应 用 的 场景 需求 。 


基于 对 框架 的 理解 与 小 程序 能 力 及 开发 过 程 ， 我 们 将 本 书 基本 内 容 划分 为 五 大 块 : 


: 创建 一 个 小 程序 项 目 并 解析 体验 : 由 零 开 始 创建 一 个 小 程序 ， 全 面体 验 小 程序 的 开发 工具 、 小 程序 界面 、 开 发 框架 、 实 现 过 程 及 代码 解析 ， 了 解 小 程序 的 应 
用 场景 及 开发 要 求 。 这 部 分 内 容 非常 适合 对 小 程序 开发 感 兴趣 的 初学 者 。 


“ 小 程序 开发 基础 指南 : 按 框架 构成 ， 阐 述 小 程序 开发 的 语言 与 语法 、 芳 数 方法 、 模 块 及 事件 交互 等 。 这 部 分 内 容 对 小 程序 开发 者 而 言 ， 是 必须 掌握 的 部 分 。 


: 组 件 开 发 应 用 指南 : 详细 阐述 使 用 组 件 进 行 页 面 视 图 的 开发 过 程 与 组 件 应 用 技巧 ， 熟 练 掌握 组 件 的 使 用 ， 将 大 大 提高 小 程序 开发 的 效率 。 





API 接 口 开 发 应 用 指南 : 微 信 强 大 的 基础 能 力 均 通过 API 接 口 开放 出 来 ， 它 为 小 程序 实现 强大 功能 及 适 配 各 种 应 用 场景 提供 了 可 能 。 这 一 部 分 内 容 阐 述 如 何 使 
用 各 个 微 信 原生 API 接 口 进 行 小 程序 开发 ， 可 帮助 开发 者 创建 出 功能 强大 且 极 具 原生 体验 的 小 程序 应 用 。 


- 小 程序 经 典 案例 : 通过 几 个 应 用 场景 的 案例 ， 让 读者 实践 小 程序 的 各 项 功能 并 掌握 一 些 应 用 技巧 。 
本 书 力 图 帮助 读者 充分 理解 小 程序 的 功能 、 开 发 过 程 ， 由 浅 入 深 ,使 读者 快速 掌握 小 程序 项 目的 开发 。 相 信 读 者 通过 学 习 本 书 ， 一 定 可 以 尝试 简单 、 高 效 地 搭 
建 具 有 原生 App 体 验 的 小 程序 应 用 或 服务 。 


致谢 





在 写作 本 书 的 过 程 中 ， 得 到 了 很 多 同行 、 同 事 以 及 朋友 的 鼓励 ， 在 此 衷心 感谢 。 也 感谢 华章 公司 编辑 们 的 努力 ， 感 谢 家 人 的 支持 与 理解 。 
场景 代表 未 来 ， 每 一 个 对 应 现实 需要 的 服务 场景 或 实用 功能 的 小 程序 ， 通 过 微 信 的 连接 与 巧妙 应 用 ， 汇 聚 起 来 ， 最 终 成 为 改变 世界 的 力量 。 


我 们 相信 : 小 程序 ， 巧 应 用 ， 可 以 成 就 大 梦想 。 





现在 ， 我 们 邀请 所 有 对 移动 互联 网 服务 与 应 用 感 兴趣 的 朋友 ， 都 来 开发 微 信人 小 程序 。 
作者 


2016 年 12 月 


第 1 章 ”创建 自己 的 第 一 个 小 程序 


学 习 计 算 机 语言 ， 一 般 会 最 先 接触 “Hello World! ”程序 。 与 之 类 似 ， 要 掌握 微 信 小 程序 的 开发 ， 我 们 也 先 来 创建 自己 的 第 一 个 小 程序 实例 。 


1.1 准备 工作 


微 信 小 程序 是 继 订 阅 号 、 服 务 号 、 企 业 号 之 后 ， 微 信 公 众 平台 上 全 新 的 一 种 连接 用 户 与 服务 的 方式 。 





开始 创建 之 前 ， 我 们 需要 做 些 准备 工作 ， 包 括 工作 账号 及 项 目 ID 获取 ， 开 发 环境 要 求 与 搭建 等 ， 这 也 是 开发 小 程序 必 备 的 前 提 工 作 。 


1.2 创建 第 一 个 小 程序 一 一 Hello WXapplet 


事 不 宜 迟 ， 我 们 马上 开始 创建 第 一 个 微 信 小 程序 一 一 Hello WXapplet。 


在 安装 开发 者 工具 的 电脑 上 运行 “ 微 信 Web 开 发 者 工具 ”， 通 过 开发 者 的 微 信 扫 码 进 入 后 ， 即 可 得 到 如 图 1-9 所 示 的 界面 。 





图 1-9 ”添加 小 程序 项 目 


点 击 “ 添 加 项 目 ”， 填 入 前 面 我 们 获得 的 ApplD (无 AppID 可 以 忽略 ) ， 并 输入 项 目 名 称 “Hello WXapplet”， 选 定 本 地 文件 夹 作为 “项 目 目录 ”， 如 图 1-10 
所 示 。 


AppID Æ AppiD 部 分 功能 受 限 


返回 填写 小 程序 ApplD 


项 目 名 称 Hello WXapplet 


项 目 目录 ，D: 小 程序 巧 应 用 


4 在 当前 目录 中 创建 quick stat MA 





图 1-10 指定 项 目 名 称 





勾 选 “在 当前 目录 中 创建 quick start 项 目 ” 后 ， 点 击 “ 添 加 项 目 ” 按 钮 ， 即 已 成 功 创建 了 我 们 的 第 一 个 微 信 小 程序 项 目 一 Hello WXapplet。 


Hello WXapplet 项 目 创 建成 功 后 ， 即 进入 并 看 到 完整 的 开发 者 工具 界面 。 我 们 创建 的 Hello WXapplet 这 个 小 程序 只 包含 两 个 页 面 : 首页 及 信息 页 ， 实 现 一 些 简 
单 的 功能 。 其 中 ， 首 页 显示 当前 登录 的 微 信号 头像 及 昵称 。 点 击 首页 ， 则 进入 信息 页 ， 可 以 查看 到 小 程序 启动 的 日 志 信息 。 我 们 将 在 第 2 章 中 全 面 解析 Hello 
WXapplet 这 个 项 目的 代码 。 








在 进行 Hello WXapplet 小 程序 项 目 代码 介绍 之 前 ， 我 们 需要 熟悉 一 下 微 信 Web 开 发 者 工具 的 操作 。 


1.3. 微 信 Web 开 上 者 工具 的 操作 与 使 用 


“ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 熟 悉 开发 者 工具 界面 与 操作 ， 将 为 我 们 今后 的 开发 带 来 极 大 的 便利 。 


第 2 章 ”小 程序 初 体验 


上 一 章 我 们 成 功 地 创建 了 第 一 个 示例 小 程序 一 一 Hello WXapplet。 本 章 通过 解析 这 个 小 程序 项 目 ， 使 大 家 尽 可 能 对 小 程序 有 个 全 局 的 认 知 ， 包 括 小 程序 的 杠 
架 、 目 录 结 构 、 开 发 步骤 以 及 入 口 界 面 、 示 例 代码 的 使 用 与 运行 等 。 


2.1 “理解 小 程序 


对 于 用 户 而 言 ， 小 程序 的 直观 表现 只 是 多 个 相互 关联 的 页 面 。 我 们 的 小 程序 Hello WXapplet 也 一 样 ， 它 由 2 个 相互 关联 的 页 面 构成 : 首页 (index) 与 信息 页 
(logs) 。 点 击 首页 的 头像 就 切换 到 信息 页 ， 在 信息 页 点 击 “ 返 回 ”可 以 从 信息 页 返回 到 首页 ， 如 图 2-1 所 示 。 


查看 启动 日 志 


- 2016/11/12 17:54:17 
. 2016/11/12 17:54:07 
. 2016/11/12 17:53:54 
2016/11/12 17:53:46 
2016/11/12 17:53:25 
2016/11/12 17:52:37 
2016/11/12 17:52:25 
2016/11/12 17:52:01 
2016/11/12 17:51:48 
. 2016/11/12 17:51:12 
. 2016/11/12 17:50:56 
. 2016/11/12 17:50:41 
. 2016/11/12 17:50:29 
. 2016/11/12 17:42:22 
. 2016/11/12 17:10:27 


1 
2 
3 
4. 
5. 
6. 
[È 
8. 
9. 


Hello World 








图 2-1 两 个 相互 关联 的 页 面 





小 程序 的 开发 实际 上 就 是 实现 这 些 页 面 的 展示 (视图 ) ， 以 及 实现 “页 面 上 用 户 交互 事件 ”、“ 页 面 间 切 换 逻 辑 ”、 “数据 存储 及 网 络 调用 ”等 事务 与 逻辑 处 
理 的 过 程 。 


2.2 小 程序 的 线程 架构 与 开发 步骤 


2.2.1 “小 程序 线程 架构 


通过 对 小 程序 项 目 Hello WXapplet 的 解析 ， 我 们 知道 每 个 小 程序 包含 一 个 描述 整体 程序 的 app 实 例 和 多 个 描述 页 面 的 page。 其 中 app 由 三 个 文件 构成 : 公共 配 


置 appjson、 公 共 样 式 app.wxss、 主 体 逻 辑 app.js。 每 个 page 最 多 由 四 个 文件 构成 : 页 面 配置 pagejson、 页 面 结构 page.wxml、 页 面 样式 page.wxss、 页 面 主体 
逻辑 page.js。 


我 们 可 以 按 需 在 app.js 和 page.js 中 添加 程序 在 生命 周期 的 每 个 阶段 相应 的 事件 。 比 如 在 页 面 onLoad 的 时 候 进行 数据 加 载 ，onShow 的 时 候 进行 数据 的 更 新 。 


典型 的 appjjs 代 码 结构 如 下 : 





App ({ 
onLaunch: function () 
// 启动 时 执行 的 e 


jy 
onShow: function() { 


// 小 程序 启动 或 从 后 人 台 进 入 前 台 时 ， 触 发 执行 的 操作 


onHide: function() { 
// 小 程序 从 前 台 进 入 后 台 时 ， 和 触发 执行 的 操作 


jy 
globalConf: { 
indexDate:’ ’ , 
matchDate:’ ” 
} 
dataCache: {}, 
globalData: 'I am global data" 
}) 





典型 的 一 个 页 面 pagejs 代 码 结构 : 





Page ({ 
Data: { 
Text:’ This is page data.’ 
} 
onLoad: function (options) 
// 页 面 加 载 时 执行 的 初始 化 工作 
} 
onReady: function() { 
// 页 面 就 续 后 触发 执行 的 操作 
onShow: function () 
// 页 面 打开 时 ， 大 发 执行 的 操作 


onHide: function() { 
// 页 面 隐藏 时 ， 触 发 执行 的 操作 








onUnLoad: function () 
// 页 面 关闭 I LTT oo 
} 
// Event handler 
viewTap: function() { 
this.setData ({ 
text:’ set some data for updating view.’ 





一 个 完整 的 小 程序 执行 的 生命 周期 如 图 2-4 所 示 。 


app.onLaunch -> app.onShow -> page1.onLoad -> page1.onShow -> page1.onReady 
(打开 程序 ， 第 一 个 页 面 page1 加 载 完成 ) 
-> page1.onHide -> page2.onLoad -> page2.onShow -> page2.onReady 


(从 第 一 个 页 面 新 打开 page2) 
-> page2.onUnload -> page1.onShow -> ... -> app.onUnload 
(关闭 page2， 返 回 page1 ... 退出 小 程序 ) 








图 2-4 ”小 程序 的 生命 周期 


一 个 page 的 生命 周期 从 onLoad 开 始 ， 整 个 生命 周期 内 onLoad、onReady、onUnload 这 三 个 事件 仅 执行 一 次 ， 而 onHide 和 onShow 在 每 次 页 面 隐藏 和 显示 时 
都 会 触发 。 当 用 户 手动 触发 左上 和 角 的 退出 箭头 时 ， 小 程序 仅 触发 app.onHide， 下 次 进入 小 程序 时 会 触发 app.onShow 以 及 当前 page.onShow。 仅 当 小 程序 在 后 台 
运行 超过 一 定时 间 未 被 唤起 、 或 者 用 户 手动 在 小 程序 的 控制 栏 里 点 击 退出 程序 、 或 者 小 程序 内 存 占用 过 大 被 关闭 时 ， 小 程序 将 被 销毁 ， 会 触发 app.onUnload 事 件 。 





小 程序 的 线程 架构 示意 如 图 2-5 所 示 。 


Veiw 线 程 appServer 线 程 





图 2-5 ”小 程序 线程 架构 示意 图 


每 个 小 程序 分 为 2 个 线程 ，view 与 appSer-ver。 其 中 view 线 程 负责 解析 泻 染 页 面 (wxml 和 wxss) ， 而 appServer 线 程 负责 运行 js。appSer-ver 线 程 运行 在 
jsCore 中 ( 安 卓 下 运行 在 X5 中 ， 开 发 工具 中 运行 在 nwjs 中 ) 。 由 于 js 不 跑 在 web-view 里 ， 就 不 能 直接 操纵 DOM 和 BOM ， 这 就 是 小 程序 没有 window 全 局 变量 的 原 
Al. 


2.3 进一步 了 解 小 程序 开发 框架 


微 信 团队 为 小 程序 提供 的 框架 命名 为 MINA 应 用 框架 。MINA 框 架 通过 封装 微 信 客户 端 提供 的 文件 系统 、 网 络 通信 、 任 务 管理 、 数 据 安 全 等 基础 功能 ， 对 上 层 提 
供 一 整套 lavaScript API， 让 开发 者 能 够 非常 方便 地 使 用 微 信 客 户 端 提 供 的 各 种 基础 功能 与 能 力 ， 快 速 构建 一 个 应 用 。 


24 小 程序 的 发 布 与 使 用 


24.1 小 程序 了 预览、 上传、 审核 与 发 布 


一 旦 开发 者 对 小 程序 项 目的 编码 完成 ， 经 调试 完毕 后 ， 就 可 以 进行 手机 内 预览 及 上 传 发 布 。 
1. 预 览 


小 程序 的 管理 员 或 是 开发 者 可 点 击 Web 开 发 者 工具 左 侧 “ 项 目 ”， 进 入 上 传 /预览 页 面 。 上 点击“ 预览”， 开 发 者 可 用 本 人 微 信 扫 码 ， 在 手机 内 预览 小 程序 的 效 
果 ， 如 图 2-9 所 示 。 


注意 ”开发 工具 上 的 二 维 码 仅 限于 登录 开发 工具 的 开发 者 本 人 可 以 扫 码 并 预览 ， 其 他 人 无 法 扫 码 预览 。 请 用 徽 信 客户 端 iJOS 或 Android 的 6.3.27 及 以 上 版 本 才 可 以 
扫 码 预览 。 


2. 上 传代 码 


小 程序 的 管理 员 可 点 击 左 侧 “项 目 ”， 进 入 上 传 /预览 页 面 ， 使 用 管理 员 本 人 微 信 号 扫 码 确认 上 传 ， 如 图 2-10 所 示 。 
注意 只 有 管理 员 有 权限 可 以 上 传 ， 开 发 者 没有 权限 上 传 。 


代码 上 传 后 可 在 微 信 公众 平台 (mp.weixin.qq.com) 的 开发 管理 页 面 中 看 到 对 应 提交 的 版 本 。 





请 用 微 信 扫描 一 维 人 码 即 可 预 掀 最 新 版 本 ， 一 维 妈 将 在 14:46:57 时 失效 。 





最 近 上 传 时 间 2016/9/20 下 午 3:44:17, 编译 包 大 小 8 kb 


最 新 更 新 时 间 。 ”2016/9/28 下 午 2:21:57, 编译 包 大 小 9 kb 





图 2-9 ”预览 小 程序 的 效果 


上 传 


上 传 后 ， 本 人 和 管理 员 即 可 在 微 信 上 预览 当前 调试 版 本 


版 本 号 | 
合理 设置 版 本 号 便于 管理 ， 请 输入 如 v1.0.0 





项 目 备注 | 
选 填 ， 可 以 备注 项 目 版 本 优化 内 容 等 ， 便 于 管理 员 识别 





最 近 上 传 时 间 2016/9/20 下 午 3:44:17, 编译 包 大 小 8 kb 


最 新 更 新 时 间 ”2016/9/28 下 午 2:21:57, 编译 包 大 小 9 kb 





图 2-10 ”上 传 小 程序 代码 至 微 信 云 端 





3. 代 码 提交 审核 


登录 微 信 公 众 平台 小 程序 ， 进 入 开发 管理 ， 开 发 版 本 中 展示 已 上 传 的 代码 ， 管 理 员 可 提交 审核 或 是 删除 代码 。 








进入 “开发 版 本 ”详情 页 ， 选 择 提交 审核 。 进 行 “ 审 核 信息 填写 ”“ 绑 定 测试 账号 ( 选 填 ) ”以 及 “配置 功能 页 面 ”。 其 中 : 
+ 测试 微 信 账 号 : 是 提供 给 微 信 审核 人 员 审 核 微 信 小 程序 时 登录 使 用 的 。 该 测试 微 信号 需 能 够 体验 小 程序 的 全 部 功能 ， 因 此 ， 请 不 要 使 用 常用 微 信 号 。 


- 配置 功能 页 面 : 是 为 了 用 户 可 以 快速 搜索 出 小 程序 。 在 这 里 需要 填写 重要 业务 页 面 的 类 目 与 标签 。 重 要 业务 页 面 组 数 不 多 于 5 组 。 如 图 2-11 所 示 。 





配置 功能 页 面 (至 少 填写 一 组 ,填写 正确 的 信息 有 利于 用 户 快速 搜索 出 你 的 小 程序 ) 


标签 用 加 车 分 开 ,填写 与 页 而 功能 相关 的 标签 ， 
更 容易 被 搜索 


添加 功能 页 面 





图 2-11 提交 审核 


由 于 大 小 限制 关系 ， 若 代码 包 大 小 超过 1024kb， 在 提交 审核 时 ， 开 发 者 工具 会 给 出 超出 大 小 限制 的 提示 ， 如 下 所 示 : 


O 提交 预览 出 错 ， 错 误 信 息 : 代码 包 大 小 为 1088 kb ,超过 限制 64 kb, 请 删除 文件 后 重 试 





上 面 这 条 是 出 错 信息 ， 意 思 是 超出 了 64kb。 已 确认 目前 最 大 为 1024kb，1088kb-1024kb=64kb。 

提交 审核 完成 后 ， 开 发 管理 页 中 审核 版 本 模块 展示 审核 进度 。 

注意 ”提交 审核 不 一 定 能 通过 微 信 团队 的 小 程序 审核 ， 开 发 者 可 参考 附录 B“ 微 信 小 程序 平台 常见 拒绝 情形 ”， 详 细 了 解 审核 标准 。 
4. 代 码 发 布 


代码 审核 通过 ， 需 要 开发 者 手动 点 击 “ 发 布 ”， 人 小 程序 才 会 发 布 到 线 上 提供 服务 。 


2.5 ”深入 理解 小 程序 的 应 用 场景 


2.5.1 ”小 程序 入 口 与 界面 


1.A0 


截止 到 本 书 完稿 ， 由 于 小 程序 仍 在 公测 阶段 ， 有 关 小 程序 真正 的 入 口 与 形式 ， 并 未 公开 确定 。 但 我 们 大 胆 预测 ， 作 为 最 终 用 户 ， 可 选择 以 下 3 种 入 口 之 一 进行 使 
用 : 


BRA, AAA. 
* 关注 小 程序 后 ， 类 似 公 众 号 (在 折 胎 窗口 内 列表 查找 进入 ) 或 在 “ 微 信 一 发 现 一 小 程序 ”进入 ; 或 可 自 定义 保存 在 桌面 上 (快捷 方式 ) 。 


" 其 他 公众 号 图 文 、 朋 友 圈 广告 、 朋 友 分 享 等 链接 进入 。 





作为 开发 者 ， 除 上 述 预测 的 入 口外 ， 还 可 以 通过 以 下 2 种 入 口 之 一 进行 使 用 : 














- 在 电脑 上 运行 “ 微 信 Web 开 发 者 工具 ”一 左 侧 导航 “调试 ”， 直 接 模拟 使 用 。 
“ 通过 “ 微 信 Web 开 发 者 工具 ”一 左 侧 导航 “项 目 ” 一 使 用 手机 微 信 扫 码 进行 预览 


2. 界 面 与 操作 


微 信人 小 程序 的 开发 是 基于 统一 的 框架 进行 的 ， 而 框架 提供 了 App 开 发 的 标准 界面 模板 ， 因 此 ， 人 小 程序 的 界面 与 操作 具有 以 下 特点 : 





: 界面 开发 成 本 低 ， 束 度 快 。 标 准 的 视图 层 模 板 与 组 件 ， 开 发 快速 ， 极 大 地 节省 了 小 程序 UI (用 户 界 面 ) 的 开发 成 本 。 


“ 风格 可 控 。 具 有 相当 一 致 的 界面 体验 ， 如 图 2-13 所 示 。 





操作 简单 。 由 于 与 微 信 客户 端 有 极其 类 似 的 操作 行为 ， 使 得 小 程序 易 上 手 、 操 作 与 使 用 。 
- 操作 性 能 佳 。 具 有 接近 原生 App 的 性 能 。 


可 见 ， 微 信人 小 程序 (应 用 号 ) 在 组 件 和 Web 之 间 取 得 了 最 佳 的 平衡 ， 保 证 了 应 用 的 一 致 性 和 运行 效率 ， 同 时 又 兼顾 了 开发 的 方便 性 。 


第 3 章 ”小 程序 开发 基础 


本 章 将 按照 小 程序 框架 的 构成 ， 阐 述 小 程序 开发 所 需 的 基础 知识 ， 包 括 配 置 、 函 数 方法 、 语 言 与 语法 、 事 件 及 其 处 理 、 模 块 、 数 据 绑 定 、 样 式 展现 等 。 这 部 分 
内 容 对 小 程序 开发 者 而 言 ， 是 必须 掌握 的 部 分 。 


3.1 配置 


3.1.1 全 局 配置 ~app.json 


微 信 小 程序 的 全 局 配置 保存 在 app.json 文 件 中 。 开 发 者 通 
(networkTimeout) 以 及 配置 多 个 切换 页 (tarBar) 等 。 














过 使 用 app.json 来 配置 页 面 文件 (pages) 的 路 径 、 窗 口 (window) 表现 、 设 定 网 络 超 时 时 间 值 


程序 清单 3-1 是 一 个 典型 的 全 局 配置 app.json 文 件 内 容 。 


程序 清单 3-1 全 局 配置 app.json 


{ 


"pages": [ 
"pages/index/index", 
"pages/logs/index" 
"window": { 
"navigationBarTitleText": "Demo" 
"tabBar": { 
niist”: [f 
"pagePath": "pages/index/index", 
"text": " 首 页 " 


tr { 
"pagePath": "pages/logs/logs", 
"text": " 日 志 LL 
}] 
hy 
"networkTimeout": { 
"request": 10000, 
"downloadFile": 10000 


"debug": true 


从 上 面 文件 内 容 可 以 看 到 ，app.json 中 的 全 局 配置 项 并 不 多 。 但 每 个 配置 项 的 数据 类 型 并 不 相同 ， 也 并 非 都 是 必须 的 。 表 3-1 列 出 了 各 全 局 配置 项 的 相关 描述 。 


表 3-1 全 局 配置 项 及 其 描述 


配置 项 LE 
pages 
window 
networkTimeout 
debug 


1.pages 配 置 项 


没 置 网 络 超 时 时 间 
设置 是 否 开 启 debug 模式 


—. 
Ke Ke Ra Ke i 
E | DE |m 
Pasi 
oy 
T 
z 
om 
wait | 
= 
= 





pages 配 置顶 接受 一 个 数组 ， 用 来 指定 小 程序 由 哪些 页 面 组 成 ， 是 必须 的 配置 项 。 数 组 的 每 一 项 都 是 字符 串 ， 代 表 对 应 页 面 的 “路 径 + 文件 名 ”信息 。 
pages 配 置 项 要 注意 三 点 : 

1) 数组 的 第 一 项 用 于 设 定 小 程序 的 初始 页 面 

2) 小 程序 中 新 增 /减少 页 面 ， 都 需要 对 pages 数 组 进行 修改 。 

3) 文件 名 不 需要 写 文件 后 级 。 小 程序 框架 会 自动 去 寻找 路 径 json、js、.wxml、.wxss 这 四 类 文件 进行 整合 。 


举例 如 下 ， 假 定 我 们 的 开发 目录 与 文件 列表 如 下 : 





pages/ 
pages/index/index.wxml 
pages/index/index.js 
pages/index/index.wxss 
pages/logs/logs.wxml 
pages/logs/logs.js 
app.js 

app. json 

app .wxss 





那么 ， 只 需要 在 app.json 中 写 入 如 下 pages 的 配置 即 可 : 





{ 
"pages": [ 
"pages /index/index" 
"pages/logs/logs" 





2.window 配 置 项 


window 配 置 项 接受 对 象 值 ， 用 来 设置 小 程序 的 状态 栏 、 导 航 条 、 标 题 、 窗 口 等 对 象 的 颜色 、 背 景色 、 内 容 属 性 ， 非 必 填 配置 项 。 没 有 配置 时 将 使 用 默认 值 。 
window 可 配置 的 对 象 参见 表 3-2。 


表 3-2 window 配置 项 及 其 描述 


navigationBarBackgroundColor 导航 栏 背景 颜色 ， 如 ”#000000” 
navigationBarTextStyle 导航 栏 标题 颜色 ， 仅 支持 black/white 
navigationBarTitleText isting =| 导航 栏 标题 文字 内 容 

backgroundColor 窗口 的 背景 色 

backgroundTextStyle 下 拉 背 景 字 体 、loading 图 的 样式 ， 仅 支持 dark/light 
enablePullDownRefresh 是 否 开 局 下 拉 刷 新 


注 : HexColor 为 十 六 进 制 颜色 值 类 型 ， 如 “#ff00ff”。 


举例 如 下 ， 我 们 在 app.json 中 设置 如 下 window 配 置 项 : 





"window": { 
"navigationBarBackgroundColor": "#ffffff", 
"navigationBarTextStyle": "black", 
"navigationBarTitleText": " 微 信 接口 功能 演示 "， 
"backgroundColor": "#eeeeee", 
"backgroundTextStyle": "light" 





则 小 程序 的 界面 效果 如 图 3-1 所 示 。 


“ry 
s 


ARE OTR 


Web+ DEMO 


为 便于 开发 者 直观 了 解 微 信 应 用 接口 能 力 ， 该 小 程 
序 就 当前 已 支持 的 接口 能 力 进行 演示 。 


基础 能 力 


界面 跳 转 、 监 听 和 加 载 


设备 相关 


网 络 相 关 





图 3-1 配置 window 项 后 的 界面 效果 





3.tabBar 配 置 项 
小 程序 可 以 是 多 标签 页 切换 的 应 用 ， 这 种 情况 下 ， 就 需要 通过 tabBar 配 置 项 来 指定 标签 页 的 表现 ， 及 标签 页 切换 时 所 显示 的 对 应 页 面 ， 参 见 表 3-3。 


表 3-3 tabBat 配 置 项 及 其 描述 


color | HexColor | 是 | | 标签 页 上 的 文字 默认 颜色 

selectedColor | HexColr | 是 | | 标签 页 上 的 文字 选中 时 的 颜色 

backgroundC olor | HexColr | 是 | | 标签 页 的 背景 

borderStyle 标签 条 之 上 的 框 线 颜 色 ， 仅 支持 black/white 


E ma 
im Cay | eee 


tabBar 配 置 项 接受 多 个 对 象 的 设 定 ， 其 中 的 对 象 list (列表 ) 是 一 个 数组 ， 用 于 配置 标签 页 。 


Sit K 








注意 只 能 配置 最 少 2 个 、 最 多 5 个 标签 页 。 标 签 页 按 数组 的 顺序 排序 。 
list (列表 ) 接受 数组 值 ， 数 组 中 的 每 一 项 也 都 是 一 个 对 象 。 对 象 的 数据 值 说 明 如 下 : 
对 象 类 型 必 填 Hi | ik 








pagePath String 是 页面 路 径 ， 必 须 在 pages 中 先 定 义 
text String 是 ”标签 页 上 按钮 文字 。 
iconPath String 是 “标签 icon 图片 路 径 ，icon 图 片 大 小 限制 为 40KB。 
selectedIconPath String 是 ”选中 标签 时 的 icon 图 片 路 径 ，icon 图 片 大 小 限制 为 40KB。 
例如 ， 某 小 程序 设置 了 2 个 标签 页 ， 代 码 如 下 : 
{ 

"tabBar": { 
"color": "#dddddd", 
"selectedColor":"#3cc51f£", 
"borderStyle": "black", 
"backgroundColor":"#ffffff", 

"iists -ff 

"pagePath": "pages/components " 
"iconPath": "pages/images/components.png", 

"selectedIconPath": "pages/images/componentsHL.png", 
"text" : "组 件 " 

ty { 

"pagePath": z "pages/ interface", 

"iconPath" “Pagea, nage interface -png", 

"se ectedIconPath" "pages/images/interfaceHL.png", 

"text": "jo" 

} 





} 
} 





界面 效果 大 致 如 图 3-2 所 示 。 








4.networkTimeout 配 置 项 


图 3-2 ”配置 tabBat 项 后 的 界面 效果 


networkTimeout 配 置 项 用 于 设置 各 种 网 络 请 求 对 象 的 超时 时 间 ， 非 必须 配置 项 。 可 设置 的 网 络 请 求 超 时 的 相关 对 象 有 request、connectSocket、 
uploadFile、downloadFile。 超 时 的 单位 均 为 毫秒 。 这 些 超时 若 不 设置 ， 则 默认 使 用 操作 系统 内 核 或 遵循 服务 器 WebServer 的 设 定 值 。 具 体 说 明 参 见 表 3-4。 


表 3-4 networkTimeout 配 置 项 及 其 描述 


E 
connectSocket 
downloadFile 


比如 ， 为 提高 网 络 响应 效率 ， 我 们 可 以 在 appjson 中 使 用 下 列 超时 设置 : 


描 述 
wx.request 的 超时 时 间 ， 单 位 毫秒 
wx.connectSocket 的 超时 时 间 ， 单 位 毫秒 
wx.uploadFile 的 超时 时 间 ， 单 位 毫秒 
wx.downloadFile 的 超时 时 间 ， 单 位 毫秒 





"networkTimeout": { 
"request": 30000, 
"connectSocket":30000, 
"uploadFile": 30000, 
"downloadFile": 30000 


5.debug 配 置 项 


debug 配 置 项 用 于 开启 开发 者 工具 的 调试 模式 ， 它 接受 一 个 boolean 值 (默认 值 是 false) 


。 开 启 后 ， 页 面 (page) 的 注册 、 页 面 路 由 、 数 据 更 新 、 事 件 触发 等 





调试 信息 将 以 info 的 形式 ， 输 出 在 “调试 ”功能 的 console (控制 台 ) 面板 上 。 


比如 ， 以 下 配置 为 打开 调试 模式 : 


"debug": true 





这 时 候 我 们 在 “调试 ”功能 下 重启 小 程序 ， 在 Console 页 面 上 可 以 看 到 更 多 的 信息 ， 如 图 3-3 所 示 。 





毫 无 疑问 ， 这 对 开发 者 快速 定位 一 些 常见 问题 很 有 帮助 。 但 请 注意 : 在 正式 发 布 时 应 当 关闭 此 配置 项 开关 。 


3.2 ”逻辑 层 





逻辑 层 ， 顾 名 思 义 ， 是 事务 逻辑 处 理 的 地 方 。 对 于 微 信 小 程序 而 言 ， 逻 辑 层 就 是 所 有 :js 脚本 文件 的 集合 。 微 信 小 程序 在 逻辑 层 将 数据 进行 处 理 后 发 送 给 视图 
层 ， 同 时 接受 视图 层 的 事件 反馈 。 





微 信 小 程序 开发 框架 的 逻辑 层 是 由 JavaScript 编 写 。 在 Javascript 的 基础 上 ， 微 信 团 队 做 了 一 些 适 当地 修改 ， 以 便 更 高 效 地 开发 小 程序 。 主 要 的 修改 包括 : 
. 增加 App 和 Page 方 法 ， 进 行程 序 和 页 面 的 注册 。 

. 提供 丰富 的 API， 如 扫 一 扫 、 支 付 等 微 信 特有 能 力 。 

. 每 个 页 面 有 独立 的 作用 域 ， 并 提供 模块 化 能 力 。 

但 同时 ， 由 于 框架 并 非 运行 在 浏览 器 中 ， 所 以 Javascript 在 Web 中 的 一 些 能 力 都 将 无 法 使 用 ， 比 如 document、window 等 ， 这 也 给 开发 带 来 相应 的 挑战 。 


逻辑 层 的 实现 就 是 编写 各 个 页 面 的 .js 脚本 文件 。 开 发 者 编写 的 所 有 代码 最 终 将 会 打包 成 一 份 Jjavascript， 并 在 小 程序 启动 的 时 候 运行 ， 直 到 小 程序 销毁 。 类 似 
ServiceWorker， 所 以 逻辑 层 也 称 为 App Service, 


框架 的 视图 层 由 WXML (WeiXin Markup language) 与 WXSS (WeiXin Style Sheet) 编写， 由 组 件 来 进行 展示 。 对 于 微 信 小 程序 而 言 ， 视 图 层 就 是 所 
有 .wxml 文 件 与 .wxss 文 件 的 集合 。 





微 信 小 程序 在 逻辑 层 将 数据 进行 处 理 后 发 送 给 视图 层 展现 出 来 ， 同 时 接受 视图 层 的 事件 反馈 。 
.wxml 文 件 用 于 描述 页 面 的 结构 。 
.wxSss 文 件 用 于 描述 页 面 的 样式 。 


视图 层 以 给 定 的 样式 展现 数据 并 将 事件 反馈 给 逻辑 层 ， 而 数据 展现 是 以 组 件 来 进行 的 。 组 件 (Component) 是 视图 的 基本 组 成 单元 ， 是 构建 .wxm| 文 件 必 不 可 
少 的 ; 








对 于 小 程序 的 WXML 编 码 开发 ， 我 们 基本 上 可 认为 就 是 使 用 组 件 、 结 合 事件 系统 ， 构 建 页 面 结构 的 过 程 。.wxml 文 件 中 所 绑 定 的 数据 ， 均 来 自 于 对 应 页 面 的 .js 
文件 中 Page 方 法 的 data 对 象 。 


第 4 章 ”框架 组 件 的 开发 应 用 


框架 为 开发 者 提供 了 一 系列 基础 组 件 ， 开 发 者 可 以 通过 组 合 这 些 基础 组 件 进行 快速 开发 、 创 建 出 强大 的 微 信 小 程序 。 组 件 是 视图 层 的 基本 组 成 单元 ， 是 构建 页 
面 结构 ( 即 .wxml 文 件 编码 实现 ) 的 重要 元 素 。 熟 练 使 用 组 件 是 高 效 开发 小 程序 的 必 备 技能 。 





我 们 将 在 本 章 详细 阐述 包括 : 五 个 常用 组 件 (视图 容器 、 基 础 内 容 、 表 单 、 互 动 操作 、 页 面 导航 ) 与 三 个 高 级 组 件 (媒体 、 地 图 、 画 布 ) 的 开发 应 用 方法 或 过 


程 。 同 时 介绍 WXML 组 件 与 HTML 语 言 标签 的 差异 。 


注意 ” 微 信 团 队 提 供 的 组 件数 量 是 动态 变化 的 ， 可 能 会 随 着 小 程序 框架 的 迭代 升级 而 发 生 轻 微 的 变化 ， 但 会 向 前 兼容 。 


41 视图 容器 组 件 


视图 容器 组 件 包括 view、scroll-view、swiper 及 swiper-item， 主 要 用 于 控制 视图 样式 与 内 容 展现 。 


4.2 ”基础 内 容 组 件 


基础 内 容 组 件 包括 icon、text 和 progress， 用 于 在 视图 界面 中 展现 图 标 、 文 本 内 容 及 进度 条 等 信息 。 


4.3 ”表单 组 件 


表单 组 件 包括 : button、form、input、checkbox、radio、picker、slider、switch 和 label， 用 于 构建 与 用 户 交互 的 表单 。 


4.4 ”互动 操作 组 件 





互动 操作 组 件 包 括 : action-sheet、modal、toast、loading， 用 于 实现 让 小 程序 应 用 对 用 户 操作 做 出 反馈 ， 如 菜单 弹出 、 模 态 信息 、 通 知 及 加 载 等 待 等 。 


45 RESANI 


Navigator (导航 组 件 ) 为 页 面 链 接 组 件 。< navigator> </navigator> 类 似 于 HTML 中 的 a 标 签 ， 但 无 target 属 性 ， 默 认 跳 转 到 新 页 面 ，redirect 为 在 当前 页 面 
打开 。navigator 组 件 具有 如 下 属性 : 


属性 名 ”类 型 默认 值 说 明 
url String 应 用 内 的 跳 转 链接 。 
redirect Boolean false 是 否 关 闭 当前 页 面 。 
省 定 点 击 时 的 样式 类 ， 当 hover-class="none" 时 ， 没 有 点 


ayy 


击 态 效果 。 


hover-class String navigator-hover 


注意 ”navigator-hover 上 默认 为 {background-color: rgba (0, 0, 0, 0.1) ; opacity: 0.7; }，<navipgator/> 的 子 节点 背景 色 应 为 透明 色 。 


示例 代码 如 下 : 





/** WXSS **/ 
/xx 修改 默认 的 navigator 点 击 态 **/ 
-navigator-hover { 

color:blue; 


} 
/xx 自 定义 其 他 点 击 态 样式 类 **/ 
.other-navigator-hover { 
color: red; 
} 
<!-- sample.wxml --> 
<view class="btn-area"> 
<navigator url="navigate?title=navigate" hover-class="navigator-hover">Hk 
转 到 新 页 面 </navigator> 
<navigator url="redirect?title=redirect" redirect hover-class="other-navigator- 
hover"> 在 当前 页 打开 
</navigator> 
</view> 


<!-- navigator.wxml --> 
<view> {{title}} </view> 
<view> 点 击 左上 角 返 回 ， 回 到 之 前 页 面 </view> 
<!-- redirect.wxml --> 
<view> {{title}} </view> 
<view> 点 击 左 上 角 返 回 ， 回 到 上 级 页 面 </view> 
// vedirect.js navigator.js 
Page ({ 
onLoad: function(options) { 
this.setData ({ 
title: options.title 
}) 
} 
}) 





navigator 组 件 可 以 帮助 我 们 实现 页 面 路 由 或 跳 转 。 事 实 上 ， 路 由 在 小 程序 项 目 开发 中 一 直 是 个 核心 点 。 由 于 微 信 团队 的 小 程序 开发 框架 在 路 由 方面 做 了 很 好 的 
封装 ， 开 发 者 不 用 去 配置 太 多 的 路 由 ， 所 以 介绍 比较 简单 。API 方 面 ， 微 信 团 队 提供 了 页 面 路 由 的 三 个 API 方 法 : 


- wx.navigateTo (OBJECT) : 保留 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 ， 使 用 wx.navigateBack 可 以 返回 到 原 页 面 。 
- wx.redirectTo (OBJECT) : 关闭 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 。 


- wx.navigateBack () : 关闭 当前 页 面 ， 回 退 至 前 一 页 面 。 


4.6 媒体 组 件 


媒体 组 件 包 括 image (图 片 ) 组 件 、audio (音频 ) 组 件 、video (视频 ) 组 件 。 通 过 组 件 的 应 用 ， 我 们 可 以 控制 图 片 、 音 频 、 视 频 内 容 在 页 面 上 的 显示 方式 及 
加 载 播 放 的 进程 。 在 页 面 上 合理 使 用 这 些 组 件 将 极 大 地 丰富 小 程序 的 界面 内 容 ， 使 页 面 更 具 吸 引力 。 


47 ”地 图 组 件 


map 组 件 (地 图 组 件 ) ， 用 于 在 页 面 上 显示 地 图 。 最 常用 于 LBS 服 务 或 位 置 指引 。 
map 组 件 的 属性 参见 表 4-14。 


表 4-14 map 组 件 属性 及 描述 


属性 名 说 明 
longitude | Number | 中 心经 度 
latitude | Number | 中 心 纬度 
scale 缩放 级 别 
markers Cam 标记 点 
covers po Array ll iain 


map 组 件 有 两 个 非常 重要 的 对 象 : markers (标记 点 ) 与 covers (my) 。 其 中 markers 对 象 ， 用 于 在 地 图 上 显示 标记 的 位 置 ， 不 能 自 定义 图 标 和 样式 。 标 记 
点 的 属性 参见 表 4-15。 





表 4-15 标记 点 属性 及 描述 


ae aE 


Desc 





而 另 一 对 象 covers (覆盖 物 ) 则 用 于 在 地 图 上 显示 自 定义 图 标 ， 可 自 定义 图 标 和 样式 。 履 盖 物 对 象 的 属性 参见 表 4-16。 





表 4-16 履 盖 物 属性 及 描述 


局 性 zE 
longituds | 经度 C Number | 是 | RAK, 0-180- 180 


iconPath 显示 的 图 标 i 项 目 目录 下 的 图 片 路 径 ， 支 持 相 对 路 径 写 法 


rotate 旋转 角度 顺 时 针 旋转 的 角度 ， 范 围 0 ~ 360， 默 认为 0 


注意 ”地 图 组 件 的 经 纬度 必 填 ， 如 果 不 填 经 纬度 则 默认 值 是 北京 的 经 纬度 。markers (标记 点 ) 只 能 在 初始 化 的 时 候 设置 ， 不 支持 动态 更 新 。 


fail 


ii 


并 





示例 代码 如 下 : 





<!-- map.wxml --> 
<map longitude="113.324520" latitude="23.099994" markers="{ {markers}}" covers= 

"{{covers}}" 

></map> 
// map.js 
Page ({ 

data: { 

markers: [{ 
atitude: 23.099994, 
ongitude: 113.324520, 
name: 'T.I.T 创意 园 '， 
desc: ' 我 现在 的 位 置 ' 
}], 
covers: [{ 
atitude: 23.099794, 
longitude: 113.324520, 
iconPath: 'http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/16007/OEBPS/Text/../images/car.png', 
rotate: 10 
tet 
atitude: 23.099298, 
ongitude: 113.324129, 
iconPath: 'http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/16007/OEBPS/Text/../images/car.png', 
rotate: 90 
} 

} 

} 








48 画布 组 件 


Canvas 组 件 (画布 组 件 ) ， 可 用 于 实现 页 面 动画 。canvas 组 件 的 属性 参见 表 4-17。 


RAAT canvas 组 件 属性 及 描述 


属性 名 默认 值 说 明 
canvas-id string | | canvas 组 件 的 唯一 标识 符 


disable-scroll 当 在 canvas 中 移动 时 ， 禁 止 屏 幕 滚 动 以 及 下 拉 刷 新 


bindtouchstart EventHandle | | 手指 触摸 动作 开始 
bindtouchmove | EventHandle | | 手指 触摸 后 移动 
bindtouchend [EventHandle | | 手指 触摸 动作 结束 


bindtouchcancel | EventHandle | | 手指 触摸 动作 被 打 断 ， 如 来 电 提醒 ， 弹 窗 
binderror EventHandle | 当 发 生 错 误 时 触发 error 事件 ，detail = {errMsg: 'something wrong'} 
注意 

"canvas 标签 默认 宽度 为 300px、 高 度 为 225px。 

- 同一 页 面 中 的 canvas-id 不 可 重复 ， 如 果 使 用 一 个 已 经 出 现 过 的 canvas-id， 该 canvas 标 签 对 应 的 画布 将 被 隐藏 并 不 再 正常 工作 。 


示例 代码 如 下 : 





<!-- canvas.wxml --> 

<canvas canvas-id="firstCanvas"></canvas> 

<!-- 当 使 用 绝对 定位 时 ， 文 档 流 后 边 的 canvas 的 显示 层级 高 于 前 边 的 canvas--> 

<canvas canvas-id="secondCanvas"></canvas> 

<!-- 因为 canvas-id 与 前 一 个 canvas 重 复 ， 该 canvas 不 会 显示 ， 并 会 发 送 一 个 错误 事件 到 ARPpP 
Service --> 

<canvas canvas-—id="secondCanvas" binderror= 
"canvasIdErrorCallback"></canvas> 

// canvas.js 

Page ({ 





canvasIdErrorCallback: function (e) { 
console.error (e.detail.errMsg) 


} 
onReady: function (e) 


// 4& Flwx.createContext # RH 


A EF Xcontext 


var context = wx.createContext () 
context .setStrokeStyle ("#00f£00") 


context .setLineWidth (5) 


context.rect(0, 0, 200, 200) 


context. stroke () 


context .setStrokeStyle ("#££0000") 


context .setLineWidth (2) 
context .moveTo (160, 100) 


context.arc(100, 100, 60, 





context .moveTo (140, 100) 


context.arc(100, 100, 40, 


context .moveTo (85, 80) 


context.arc(80, 80, 5, 0, 


context .moveTo (125, 80) 


context.arc(120, 80, 5, 0, 


context. stroke () 


// 调用 wx.drawCanvas， 通 过 canvasId 指 定 在 哪 张 画布 上 绘制 ， 通 


wx.drawCanvas ({ 


canvasId: 'firstCanvas', 


2 * Math.PI, true) 


0, Math.PI, false) 
2 * Math.PI, true) 


2 * Math.PI, true) 


过 actions 指 定 绘制 行为 


actions: context.getActions() // 获取 绘图 动作 数组 


}) 





至 此 ， 所 有 的 视图 组 件 都 介绍 完了 。 





我 们 在 这 里 推荐 如 下 这 种 有 效 的 样式 ， 


但 细心 的 读者 应 该 会 发 现 ， 没 有 与 <table> </table> 等 同 的 组 件 。 这 样 有 些 需要 以 表格 展现 的 内 容 就 会 无 法 很 好 地 呈现 。 


望 能 达到 与 使 用 <table> </table> 等 同 的 效果 。 





<!-- sample.wxss 一 -> 
.table{display: table;} 
.tb-tr{display: table-row; } 
.tb-th, 

.tb-td{display: table-cell; } 





49 WXML 组 件 与 HTML 的 差异 


WXML 与 HTML 最 大 的 差异 是 标签 。 


目前 WXML 提 供 的 标签 很 有 限 ， 但 是 


它 提供 了 八大 类 组 件 来 满足 各 种 需求 。 我 们 通 


表 4-18 WXML 与 HTML 的 标签 差异 对 比 


WXML 
article, aside, body, div, 
ul, li, caption, dd, dl, dt, 
view footer, header, nav, section, 
table, thead, tbody, tr, td, th, ol, 
h1, h2, h3, h4, h5, h6, p, em 
text span 
navigator a 
image img 
input input[type=’ text’ ] 
checkbox input[type=’ checkbox’ ] 
radio input[type=’ radio’ ] 
button button 
form form 


HTML 


过 表 4-18 来 对 比 下 WXML 与 HTML 的 标 


icon ico 后 级 的 特殊 图 片 格式 以 favicon.ico 放 在 web 根 下 或 在 <link> 中 使 用 


可 见 ，WXML 在 语意 方面 还 不 太 完善 。 说 明 如 下 : 


. <view> 标 签 替 代 了 HTML 里 面 的 大 部 分 标签 ; 


+ <text> 标 签 是 唯一 一 个 可 以 长 按 选中 文本 的 标签 


` <navigatof> 标 签 目前 只 能 作为 站 内 导航 ， 不 支持 链接 外 跳 。 该 标签 可 使 用 hovet-class 来 控制 导航 链接 的 点 击 态 样式 类 ， 


， 而 且 text 标 签 不 允许 互相 嵌 套 。 除 此 之 外 它 还 


还 支持 转 义 符 “/”; 


默认 值 为 “background-color: 


rgba (0, 0, 0, 0.1) ; opacity: 0.7; ” ; 


<image> 标 签 是 图 片 标签 ， 这 个 标签 跟 HTML 中 的 img 标 签 差 异 很 大 ， 它 并 非 真正 意义 上 的 图 片 标签 ， 更 像 是 给 一 个 <view> 设 置 背景 图 片 ， 然 后 默认 设置 
为 "background-size: 100%100%"， 所 以 它 提供 了 mode 属 性 来 满足 各 种 背景 设置 需求 ， 也 就 是 文档 中 的 12 种 模式 ， 其 中 包括 3 种 缩放 模式 、9 种 裁剪 模式 。 














<input>、<checkbox> 和 <radio> 标 签 其 实 是 拆 分 了 HTML 中 的 input 标 签 。 





“<icon> 标 签 更 像 是 WXML 提 供 的 一 套 标 准 的 图 标 ， 类 型 包括 了 success、success_no_circle、info、warn、waiting、cancel、download、search、clearo 


WXML 除 了 提供 基础 的 标签 外 还 提供 了 一 套 标准 化 的 组 件 ， 开 发 人 员 可 以 通过 标准 化 的 组 件 来 实现 一 些 HTML 上 比较 复杂 的 功能 ,例如 : 可 滚动 视图 区 域 、 滑 
块 视图 容器 、 进 度 条 以 及 模 态 弹 窗 等 。 


第 5 章 ”API 接口 的 开发 应 用 


微 信 强 大 的 基础 服务 能 力 均 通过 API 接 口 开放 出 来 ， 为 小 程序 实现 强大 功能 及 适 配 各 种 应 用 场景 提供 了 可 能 。 本 章 将 主要 阐述 使 用 各 个 微 信 原生 API 接 口 进行 小 
程序 开发 。 


微 信 团 队 目 前 为 小 程序 开发 提供 了 七 大 类 API 接 口 : 网 络 API、 媒 体 API、 数 据 存储 API、 位 置 API、 设 备 信息 API、 界 面 API 以 及 微 信 开放 接口 ( 见 表 5-1) 。 这 
些 丰 富 的 微 信 原生 AP1， 主 要 用 于 逻辑 层 的 开发 ， 用 于 实现 各 种 具有 原生 功能 体验 的 小 程序 处 理 能 力 。 


表 5-1 微 信 API 接 口 类 别 及 应 用 描述 


接口 类 别 应 用 描述 

网 络 API 提供 网 络 请 求 、 上 传 下 载 、webSocket 能 力 

媒体 API 提供 图 片 、 录 音 、 音 视频 、 文 件 处 理 能 3 

数据 存储 API 提供 数据 缓存 能 力 

位 置 API 提供 LBS 位 置 获取 、 查 看 能 力 

设备 信息 API 提供 网 络 状态 、 系 统 信 息 、 重 力 感应 、 罗 盘 等 设备 相关 能 力 
界面 API 提供 设置 导航 条 、 导 航 、 动 画 、 绘 图 等 能 力 

微 信 开 放 接口 提供 实现 用 户 登录 、 用 户 信息 、 模 板 消 息 及 微 信 支付 相关 能 3 


注意 ” 微 信 团 队 开放 的 原生 API 接 口 数量 与 功能 是 动态 变化 的 ， 可 能 会 随 着 小 程序 框架 的 迭代 升级 而 发 生 轻 微 的 变化 ， 但 会 向 前 兼容 。 


5.1 网 络 API 


网 络 API 可 能 帮助 开发 者 实现 网 络 URL 访 问 调 用 、 文 件 的 上 传 与 下 载 、 网 络 套 接 字 的 使 用 等 功能 处 理 。 目 前 微 信 团队 提供 了 以 下 10 个 网 络 API 接 口 : 
- wx.tequest (OBJECT) 接口 用 于 发 起 HTTPS 请 求 。 
- wx.uploadfile (OBJECT) 接口 用 于 将 本 地 资源 上 传 到 开发 者 服务 器 。 
- wx.downloadFile (OBJECT) 接口 用 于 下 载 文件 资源 到 本 地 。 
- wx.connectSocket (OBJECT) 接口 用 于 创建 一 个 WebSocket 连 接 。 
- wx.onSocketOpen (CALLBACK) 接口 用 于 监听 WebSocket 连 接 打开 事件 。 
:wx.OnSocketEtrtor (CALLBACK) 接口 用 于 监听 WebSocket 错 误 。 
< wx.sendSocketMessage (OBJECT) 接口 实现 通过 WebSocket 连 接 发 送 数据 。 


- wx.onSocketMessage (CALLBACK) 接口 实现 监听 WebSocket 接 受到 服务 器 的 消息 事件 。 


< wx.closeSocket () 接口 用 于 关闭 WebSocket 连 接 。 
- wx.onSocketClose (CALLBACK) 接口 用 于 实现 监听 WebSocket 关 闭 。 
1.x.request (OBJECT) 
wx.redquest 接 口 用 于 发 起 HTTPS 请 求 。wx.request 接 口 参数 (OBJECT) 说 明 见 表 5-2。 
注意 一 个 微 信 小 程序 ， 同 时 只 能 有 5 个 网 络 请 求 连接 。 
表 5-2 wx.request 接 口 参数 

wz za a 
ul ”|sting | 是 | 开发 者 服务 器 接口 地 址 
data 请 求 的 参数 
header 设置 请 求 的 header, header 中 不 能 设置 Referer 


. 默认 为 GET， 有 效 值 : OPTIONS, GET, HEAD, POST, PUT, 
method String 否 
DELETE, TRACE, CONNECT 
oe adi 5 收 到 开发 者 服务 成 功 返 回 的 回调 函数 ，res = {data: ' 开 发 者 服务 器 
返回 的 内 容 '} 


fail 否 | 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


示例 代码 如 下 : 


$ 





wx.request ({ 
url: 'test.php', 
data: { 


"Content-Type': 'application/json' 
jy 
success: function(res) { 
console. log (res.data) 
} 
}) 





2.wx.uploadFile (OBJECT) 


wx.uploadfile 接 口 用 于 将 本 地 资源 上 传 到 开发 者 服务 器 。 如 页 面 通过 wx.chooselmage 等 接口 获取 到 一 个 本 地 资源 的 临时 文件 路 径 后 ， 可 通过 此 接口 将 本 地 资 
源 上 传 到 指定 服务 器 。 客 户 端 发 起 一 个 HTTPS POST 请 求 ， 其 中 Content-Type 为 multipart/form-data。O 〇 OBJECT 参数 说 明 见 表 5-3。 


表 5-3 wx.uploadfile 接 口 参数 


参 数 说 明 
url 开发 者 服务 器 URL 


filePath | String | Æ | 要 上 传 文件 资源 的 路 径 


. 文件 对 应 的 key， 开 发 者 在 服务 器 端 通过 这 个 key 可 以 获取 到 文 
name String 本 pis 
件 二 进 制 内 容 
header HTTP 请 求 Header，header 中 不 能 设置 Referer 
formData HTTP 请 求 中 其 他 额外 的 form data 
success 接口 调用 成 功 的 回调 了 滑 数 


fail Function 接口 调用 失败 的 回调 函数 
complete | Function 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


S| 


fia =| Az 


D | OA | oA 





my 


nz 


示例 代码 如 下 : 





wx.chooseImage ({ 
success: function(res) { 


var tempFilePaths = res.tempFilePaths 
wx.uploadFile ({ 
url: 'http://example.com/upload', 
filePath: tempFilePaths [0], 
name: 'file', 
formData: { 
"user': "test" 





3.wx.downloadFile (OBJECT) 


wx.downloadFile (OBJECT) 接口 用 于 下 载 文件 资源 到 本 地 。 客 户 端 直接 发 起 一 个 HTTP GETER, E 下载 到 的 资源 根据 type 进 行 处 理 ， 并 返回 文件 的 本 地 临 
时 路 径 。OBJECT 参 数 说 明 见 表 5-4。 


表 5-4 wx.downloadFile 接 口 参 数 


参 数 说 明 
url 下 载 资源 的 URL 


type 下 载 资源 的 类 型 ， 用 于 客户 端 识别 处 理 ， 有 效 值 : image/audio/video 


header HTTP 请 求 Header 


"E 村 下 载 成 功 后 以 tempFilePath 的 形式 传 给 页 面 ,res = {tempFilePath: ' 
success unction Ş 

文件 的 临时 路 径 人 
fail 接口 调用 失败 的 回调 函数 


complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
注意 文件 的 临时 路 径 ， 在 小 程序 本 次 启动 期 间 可 以 正常 使 用 ， 如 需 持 久保 存 ， 需 在 主动 调用 wx.saveFile， 在 小 程序 下 次 启动 时 才能 访问 得 到 。 


示例 代码 如 下 : 





wx.downloadFile ({ 
url: 'http://example.com/audio/123', 
type: 'audio', 
success: function(res) { 
wx.playVoice ({ 
filePath: res.tempFilePath 
) 





4.wx.connectSocket (OBJECT) 
wx.connectSocket (OBJECT) 接口 用 于 创建 一 个 WebSocket 连 接 。OBJECT 参 数 说 明 见 表 5-5。 
注意 一 个 微 信 小 程序 同时 只 能 有 一 个 WebSocket 连 接 ， 如 果 当 前 已 存在 一 个 WebSocket 连 接 ， 会 自动 关闭 该 连接 ， 并 重新 创建 一 个 WebSocket 连 接 。 


表 5-5 wx.connectSocket 接 口 参 数 


= ze 


F T E 开发 者 服务 器 接口 地 址 ， 必 须 是 HTTPS 协议 ， 且 域名 必须 是 后 台 
j 下 | 配置 的 合法 域名 


data 请 求 的 数据 
header HTTP Header，header 中 不 能 设置 Referer 


. 默认 是 GET， 有 效 值 为 : OPTIONS, GET, HEAD, POST, PUT, 
method String m 
DELETE, TRACE, CONNECT 


success 接口 调用 成 功 的 回调 函数 





( 续 ) 
参 数 说 BA 
fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


示例 代码 如 下 : 





wx.connectSocket ({ 
url: 'test.php', 
data: { 


"content-type': 'application/json' 


jy 
method: "GET" 





5.wx.onSocketOpen (CALLBACK) Swx.onSocketError (CALLBACK) 
wx.onSocketOpen (CALLBACK) 接口 用 于 监听 Websocket 连 接 打开 事件 ， 而 wx.onSocketError (CALLBACK) 接口 则 用 于 监听 Websocket 错 误 。 


示例 代码 如 下 : 





wx.connectSocket ({ 
url: 'test.php' 
}) 
wx.onSocketOpen (function (res) { 
console. log ('WebSocket 连 接 已 打开 ! ') 
}) 
wx.onSocketError (function (res) { 
console.log ('WebSocket 连 接 打 开 失败 ， 请 检查 ! ') 
}) 





6.wx.sendSocketMessage (OBJECT) 


wx.sendSocketMessage (OBJECT) 接口 实现 通过 WebSsocket 连 接 发 送 数据 ， 需 要 先 wx.connectSocket， 并 在 wx.onSocketOpen 回 调 之 后 才能 发 送 。 
OBJECT 参数 说 明 见 表 5-6。 


表 5-6 wx.sendSocketMessage4= 7 BAK 


参 数 说 明 
data | String | 是 | 需要 发 送 的 内 容 

success 接口 调用 成 功 的 回调 函数 

fail 接口 调用 失败 的 回调 函数 


complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


示例 代码 如 下 : 


OH | OH | OM | Fim 





var socketOpen = false 
var socketMsgQueue = [] 
wx.connectSocket ({ 
url: 'test.php' 
}) 
wx.onSocketOpen (function (res) { 
socketOpen = true 
for (var i = 0; i < socketMsgQueue.length; i++) { 
sendSocketMessage (socketMsgQueue [i] ) 
} 


socketMsgQueue = [] 


function sendSocketMessage (msg) { 
if (socketOpen) { 
wx. sendSocketMessage ({ 
data:msg 
}) 
} else { 
socketMsgQueue. push (msg) 





7.wx.onSocketMessage (CALLBACK) 


wx.onSocketMessage (CALLBACK) 接口 实现 监听 Websocket 接 受到 服务 器 的 消息 事件 。CALLBACK 返 回 参数 有 data ， 类 型 为 String， 是 服务 器 返回 的 消 


示例 代码 如 下 : 





wx.connectSocket ({ 
url: 'test.php' 
}) 
wx.onSocketMessage (function (res) { 
console.1log(' 收 到 服务 器 内 容 : ' + res.data) 
}) 





8.wx.closeSocket () 与 wx.onSocketClose (CALLBACK) 


wx.closeSocket () 接口 用 于 关闭 WebSocket 连 接 。 而 wx.onSocketClose (CALLBACK) 接口 则 用 于 实现 监听 Websocket 关 闭 。 


示例 代码 如 下 : 








wx.connectSocket ({ 
url: 'test.php' 


}) 
// 注意 这 里 有 时 序 问 题 ， 
// 如 果 wx.connectSocket 还 没 回 调 Wx.onSocketOpen， 而 先 调用 wx.closeSocket, 那么 就 
// 做 不 到 关闭 WebSocket 的 目的 。 
// 必须 在 WebSocket 打开 期 间 调用 wx.closeSocket 才能 关闭 。 
wx.onSocketOpen (function() { 
wx.closeSocket () 
}) 
wx.onSocketClose (function (res) { 
console.log ('WebSocket 已 关闭 ! ') 
}) 





5.2 ”媒体 API 


媒体 API 帮 助 开发 者 在 小 程序 开发 时 方便 、 简 洁 地 实现 微 信 中 的 图 片 调用 与 预览 、 音 频 录 制 与 播放 、 音 乐 播放 控制 、 视 频 调用 以 及 文件 存储 等 实用 功能 。 


5.3 ”数据 仓储 API 


每 个 微 信 小 程序 都 可 以 有 自己 的 本 地 缓存 ， 可 以 通过 数据 存储 的 API 实 现 对 本 地 缓存 进行 设置 、 获 取 和 清理 。 本 地 缓存 最 大 为 5MB。 数 据 存储 API 包 括 以 下 几 


< wx.setStorage (OBJECT) 接口 实现 将 数据 存储 在 本 地 缓存 中 指定 的 key 中 。 

- wx.setStorageSync (KEY, DATA) 接口 用 于 将 data 存 储 在 本 地 缓存 中 指定 的 key 中 。 

“wx.getStorage (OBJECT) 接口 用 于 从 本 地 缓存 中 异步 获取 指定 key 对 应 的 内 容 。 

wx.BetStorageSync (KEY) 接口 用 于 从 本 地 缓存 中 同步 获取 指定 Key 对 应 的 内 容 。 

< wx.getStorageInfo (OBJECT) 接口 用 于 异步 获取 当前 storage 的 相关 信息 。 

wx.getStorageInfoSync 接 口 用 于 同步 获取 当前 storage 的 相关 信息 。 

“ wx.removeStorage (OBJECT) 接口 用 于 从 本 地 缓存 中 异步 移 除 指定 key。 

wx.temoveStorageSync (KEY) 接口 用 于 从 本 地 缓存 中 同步 移 除 指定 key。 

- wx.clearStorage () 接口 用 于 清理 本 地 数据 缓存 。 

- wx.clearStorageSync () 接口 用 于 同步 清理 本 地 数据 缓存 。 
注意 localStorage 是 永久 存储 的 ， 但 是 我 们 不 建议 将 关键 信息 全 部 存在 localStorage， 以 防 用 户 换 设 备 的 情况 。 
1.wx.setStorage (OBJECT) 
接口 实现 将 数据 存储 在 本 地 缓存 中 指定 的 key 中 ， 会 覆盖 掉 原 来 该 key 对 应 的 内 容 ， 这 是 一 个 异步 接口 。OBJECT 参 数 说 明 见 表 5-21。 


表 5-21 wx.setStorage 接 口 参 数 说 明 


参 数 类 型 说 明 
key String 本 地 缓存 中 的 指定 的 key 


需要 存储 的 内 容 

接口 调用 成 功 的 回调 函数 

接口 调用 失败 的 回调 函数 

接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


data Object/String 
success Function 


fail Function 





DX | ON | ON | ti | in 
‘it 


complete Function 


示例 代码 如 下 : 





wx.setStorage ({ 
key: "key" 
data:"value" 


}) 





2.wx.setStorageSync (KEY, DATA) 


wx.setStorageSync (KEY, DATA) 接口 用 于 将 data 存 储 在 本 地 缓存 中 指定 的 key 中 ， 会 覆盖 掉 原 来 该 key 对 应 的 内 容 ， 这 是 一 个 同步 接口 。 参 数 说 明 见 表 5- 








22。 
表 5-22 wx.setStorageSync 接 口 参数 说 明 
5E me 

| mo Tai EER TT ARTE ey 
data Object/String 需要 存储 的 内 容 

示例 代码 如 下 : 

try { 

wx.setStorageSync('key', 'value') 


} catch (e) { 
} 





3.wx.getStorage (OBJECT) Swx.removeStorage (OBJECT) 


wx.getStorage (OBJECT) 接口 用 于 从 本 地 缓存 中 异步 获取 指定 key 对 应 的 内 容 。wx.removeStorage (OBJECT) 则 用 于 从 本 地 缓存 中 异步 删除 指定 key 对 应 
的 内 容 。OBJECT 参 数 说 明 见 表 5-23。 


表 5-23 接口 参数 说 明 


示例 代码 如 下 : 


说 RH 


DA 
本 地 缓存 中 的 指定 的 key 
success 接口 调用 的 回调 函数 ，res = {data: key 对 应 的 内 容 } 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 





wx.getStorage ({ 
key: 'key', 
success: function(res) { 

console. log(res.data) 

} 

We 

wx. removeStorage ({ 
key: 'key', 
success: function(res) { 

console. log(res.data) 

} 

} 





4.wx.getStorageSync (KEY) Swx.removeStorageSync (KEY) 


wx.getStorageSync (KEY) 接口 用 于 从 本 地 缓存 中 同步 获取 指定 key 对 应 的 内 容 。 


缓存 中 的 指定 的 key， 必 填 。 


示例 代码 如 下 : 


而 接口 用 于 从 本 地 缓存 中 同步 移 除 指定 key 对 应 的 内 容 。 参 数 为 key， 是 本 地 





var value = wx.getStorageSync ('key') 
if (value) { 
// Do something with return value 

} 
try { 

wx. removeStorageSync ('key") 
} catch (e) { 

// Do something when catch error 


} 





5.wx.getStoragelnfo (OBJECT) 


接口 用 于 异步 获取 当前 storage 的 相关 信息 。OBJECT 参 数 说 明 见 表 5-24。 


表 5-24 wx.getStorageInfo 接 口 参 数 说 明 


= a 
success 接口 调用 的 回调 函数 ， 详 见 返 回 参数 说 明 





参数 说 明 
fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


success 返回 参数 说 明 如 下 : 








参 数 类 型 说 RA 


keys String Array 当前 storage 中 所 有 的 key。 
currentSize Number 当前 占用 的 空间 大 小 ， 单 位 为 kbs 
limitSize Number 限制 的 空间 大 小 ， 单 位 为 kbo 

示例 代码 如 下 : 





wx.getStorageInfo ({ 
success: function(res) { 
console. log (res.keys) 
console. log (res.currentSize) 
console. log(res.limitSize) 
} 
}) 





6.wx.getStoragelnfoSync () 
接口 用 于 同步 获取 当前 Storage 的 相关 信息 。 


示例 代码 如 下 : 





try { 

var res = wx.getStorageInfoSync () 
console.log (res .keys) 

console.log (res.currentSize) 
console.log (res.limitSize) 

catch (e) { 

// Do something when catch error 





7.wx.clearStorage () 与 wx.clearStorageSync () 
wx.clearStorage () 接口 用 于 清理 本 地 数据 缓存 ，wx.clearStorageSync () 接口 则 用 于 同步 清理 本 地 数据 缓存 。 


示例 代码 如 下 : 





wx.clearStorage () 

try { 
wx.clearStorageSync () 

} catch(e) { 

} 





5.4 ”位 置 API 


位 置 API 可 以 帮助 开发 者 实现 小 程序 中 的 LBS 位 置 相关 的 功能 与 调用 ， 包 括 3 个 API 接 口 : 
wx.getLocation (OBJECT) 获取 当前 的 地 理 位 置 、 速 度 。 


- wx.chooseLocation (OBJECT) 接口 用 于 打开 地 图 选择 位 置 。 





“ wx.openLocation (OBJECT) 接口 用 于 实现 使 用 微 信 内 置地 图 查看 位 置 。 





1.wx.getLocation (OBJECT) 
获取 当前 的 地 理 位 置 、 速 度 。OBJECT 参 数 说 明 见 表 5-25。 


表 5-25 wx.getLocation 接 口 参数 说 明 


. 默认 为 wgs84 返回 gps 坐标 ，gcj02 返回 可 用 于 wx.openLocation 
type String 的 坐标 
十 


success | Function | ”是 | 接口 调用 成 功 的 回调 函数 ， 返 回 内 容 详 见 返 回 参数 说 明 


填 
月 
fail 否 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


success 返 回 参 数 说 明 如 下 : 


| 


参 数 说 有明 

latitude 纬度 ， 浮 点 数 ， 范 围 为 -90 ~ 90， 负 数 表示 南 纬 。 
longitude 经 度 ， 浮 点 数 ， 范 围 为 -180 ~ 180， 负 数 表示 西 经 。 
speed 速度 ， 浮 点 数 ， 单 位 为 m/s. 

accuracy 位 置 的 精确 度 。 


示例 代码 如 下 : 





wx.getLocation ({ 
type: 'wgs84', 
success: function(res) { 
var latitude = res.latitude 
var longitude = res.longitude 
var speed = res.speed 
var accuracy = res.accuracy 
} 
}) 





2.wx.chooseLocation (OBJECT) 
接口 用 于 打开 地 图 选择 位 置 。OBJECT 参 数 说 明 见 表 5-26。 
表 5-26 wx.chooseLocation 接 口 参 数 说 明 


参数 说 明 

success 接口 调用 成 功 的 回调 函数 ， 返 回 内 容 详 见 返回 参数 说 明 . 
cancel 用 户 取消 时 调用 

fail 接口 调用 失败 的 回调 函数 


complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


其 中 success 返 回 参 数 说 明 如 下 : 


参 数 说 明 
name 位 置 名 称 
address 详细 地 址 。 
latitude 纬度 ， 浮 点 数 ， 范 围 为 -90 ~ 90, 负数 表示 南 纬 。 
longitude 经 度 ， 浮 点 数 ， 范 围 为 -180 ~ 180，, 人 负数 表示 西 经 。 


3.wx.openLocation (OBJECT) 


接口 用 于 实现 使 用 微 信 内 置地 图 查看 位 置 。OBEJCT 参 数 说 明 见 表 5-27。 


表 5-27 wx.openLocation 接 口 参 数 说 明 


参 数 类 型 必 填 
longitude 
scale INT 
address 
success E 
complete 

示例 代码 如 下 : 


说 BA 
纬度 ， 范 围 为 -90 ~ 90, 负数 表示 南 纬 
经 度 ， 范 围 为 -180 ~ 180, 负数 表示 西 经 
缩放 比例 ， 范 围 1 ~ 28， 默 认为 28 
位 置 名 
地 址 的 详细 说 明 
接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 





wx.getLocation ({ 
type: 'gcj02', // 返回 值 可 以 用 于 wx.openLocation 的 经 纬度 
success: function(res) { 
var latitude = res.latitude 
var longitude = res.longitude 
wx. openLocation ({ 
latitude: latitude, 
longitude: longitude, 
scale: 28 
}) 
} 
}) 





5.5 ”设备 信息 APl 


设备 信息 API 可 以 帮助 开发 者 在 小 程序 中 实现 网 络 状态 、 系 统 信息 、 重 力 感应 、 罗 盘 、 电 话 等 设备 相关 处 理 能 力 。 目 前 包括 6 个 API 接 口 : 


wx.getNetworkType (OBJECT) 接口 用 于 获取 网 络 类 型 。 

< wx.getSystemInfo (OBJECT) 接口 用 于 获取 系统 信息 。 

- wx.onAccelerometerChange (CALLBACK) 接口 监听 重力 感应 数据 。 
. wx.onCompassChange (CALLBACK) 接口 实现 监听 罗盘 数据 。 

< 5.wx.getSystemInfoSync () 接口 用 于 获取 系统 信息 同步 。 
“wx.makePhoneCall (OBJECT) 接口 用 于 拔 打 电话 。 
1.wx.getNetworkType (OBJECT) 


接口 用 于 获取 网 络 类 型 。OBJECT 参 数 说 明 见 表 5-28。 


表 5-28 wx.getNetworkType 接 口 参数 说 明 


参 数 


D | D 


示例 代码 如 下 : 


说 AA 


接口 调用 成 功 ， 返 回 网 络 类 型 networkType 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 





wx.getNetworkType ({ 
success: function(res) { 


var networkType = res.networkType // BH MARA2g, 3g, 4g, wifi 


} 
}) 





2.wx.getSystemInfo (OBJECT) Swx.getSystemInfoSync () 





wx.getSystemInfo (OBJECT) 接口 用 于 异步 获取 系统 信息 。 而 wx.getSystemlnfoSync () 接口 用 于 同步 获取 系统 信息 。OBJECT 参 数 说 明 见 表 5-29。 


表 5-29 wx.getSystemInfo 接 口 参数 说 明 


参数 说 明 

Success 接口 调用 成 功 的 回调 

Fail 接口 调用 失败 的 回调 函数 

Complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


success 回 调 参 数 说 明 如 下 : 


Dy | OH 


属 性 说 明 


Model 手机 型 号 
pixelRatio 设备 像素 比 
window Width 窗口 宽度 
windowHeight 窗口 高 度 
language 微 信 设置 的 语言 
Version 微 信 版 本 号 


示例 代码 如 下 : 





wx.getSystemInfo ({ 
success: function (res) { 
console.log (res .model1) 
console.log (res.pixelRatio) 
console.log (res.windowWidth) 
console.log (res.windowHeight) 
console.log (res.language) 
console.log (res.version) 
} 
We 
try { 
var res = wx.getSystemInfoSync () 
console. log (res .model) 
console.log(res.pixelRatio) 
console. log (res .windowWidth) 
console.log(res.windowHeight) 
console.log (res. language) 
console.log (res.version) 
catch (e) { 
// Do something when catch error 





3.wx.onAccelerometerChange (CALLBACK) 
接口 监听 重力 感应 数据 ， 频 率 : 5 次 / 秒 。 其 中 CALLBACK 返 回 参数 x、y、z 为 X 轴 、Y 轴 、Z 轴 。 


示例 代码 如 下 : 





wx.onAccelerometerChange (function (res) { 
console.log (res .x) 
console.log (res.y) 
console.log (res.z 


}) 





4.wx.onCompassChange (CALLBACK) 
接口 实现 监听 罗盘 数据 ， 频 率 : 5 次 / 秒 。 其 中 CALLBACK 返 回 参 数 direction ， 为 面 对 的 方向 度数 ， 类 型 为 Number。 


示例 代码 如 下 : 





wx.onCompassChange (function (res) { 
console.log(res.direction) 


}) 





5.wx.makePhoneCall (OBJECT) 


接口 用 于 拔 打 电话 。OBJECT 参 数 说 明 见 表 5-30。 


表 5-30 ”wx.makePhoneCall 接 口 参 数 说 明 


参 数 说 明 
phoneNumber 需要 拨打 的 电话 号 码 
success 接口 调用 成 功 的 回调 
fail i 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


示例 代码 如 下 : 


ay) 


i 





wx.makePhoneCall ({ 
phoneNumber: '1340000' // 仅 为 示例 ， 并 非 真实 的 电话 号 码 
}) 





5.6 界面 API 





界面 API 的 开发 应 用 ， 可 以 帮助 开发 者 实现 小 程序 的 交互 反馈 、 页 面 导 航 、 动 画 、 绘 图 等 能 力 。 


5.7 ”开放 API 


开放 API 用 于 帮助 开发 者 获得 消息 、 用 户 信息 、 微 信 支 付 等 微 信 应 用 或 公众 平台 服务 调用 的 能 力 。 目 前 可 供应 用 的 开发 API 接 口 有 : 
-wxlogin (OBECT) 接口 用 于 获取 登录 凭证 (code) 及 用 户 登 录 态 信息 。 
- wx.checkSession (OBJECT) 接口 用 于 检查 登录 态 是 否 过 期 。 
. wxgetUserInfo (OBJECT) 接口 用 于 获取 用 户 信息 ， 需 要 先 调用 wxlogin 接 口 。 
wxtequestPayment (OBJECT) 接口 用 于 发 起 微 信 支 付 。 


* 模板 消息 接口 用 于 给 用 户 发 送 如 通知 类 的 模板 消息 。 


第 6 章 ”小 程序 开发 纲要 


本 章 将 从 全 局 的 角度 ， 简 要 地 阐述 小 程序 开发 所 涉及 的 内 容 与 关键 点 ， 以 帮助 开发 者 掌握 小 程序 开发 的 纲要 。 主 要 包括 界面 、 网 络 、 本 地 数据 及 缓存 、 设 备 硬 
件 、 微 信 开 放 接 口 、 媒 体 、 后 端 开发 与 设计 。 


6.1 界面 
框架 为 开发 者 提供 了 一 系列 基础 组 件 ， 开 发 者 可 以 通过 组 合 这 些 基础 组 件 进行 快速 开发 。 简 单 的 理解 就 是 为 小 程序 提供 了 开发 的 标准 界面 模板 ， 一 些 标准 的 
View 将 会 大 大 节省 了 UI 开 发 成 本 ， 也 让 风格 一 致 ， 体 验 可 控 。 基 本 上 来 说 ， 这 个 组 件 的 风格 都 比较 偏向 于 微 信 的 风格 ， 毕 竟 也 是 在 微 信 里 使 用 的 嘛 。 


小 程序 除了 提供 基础 的 组 件 ， 如 文字 、icon、 进 度 条 、 滚 动 条 、 表 单 组 件 (button、checkbox、input、picker、 开 关 选 择 器 、 滑 动 选择 器 、 弹 窗 、 弹 自 定义 
菜单 ) 等 之 外 ， 还 提供 了 媒体 组 件 、 地 图 和 画布 功能 组 件 。 


下 面 是 部 分 案例 。 
1. 在 标题 栏 显示 和 隐藏 “正在 加 载 ” 动 画 


代码 如 下 : 





Page ({ 

showNavigationBarLoading: function () { 
wx. showNavigationBarLoading () 

jy 

hideNavigationBarLoading: function () { 
wx. hideNavigationBarLoading () 

} 
}) 








2. 页 面 间 跳 转 
代码 如 下 : 
Page ({ 
navigateTo: function () { 
wx.navigateTo({ url: ‘./navigator’ }) 
navigateBack: function () { 


wx .navigateBack () 
hy 
redirectTo: function () { 
wx.redirectTo({ url: ‘./navigator’ }) 
i 
}) 





这 里 要 注意 navigateTo 和 redirectTo 的 区 别 ，navigateTo 保 留 当前 页 面 ， 然 后 跳 到 新 页 面 ， 可 以 通过 navigateBack 方 法 返回 到 之 前 的 页 面 。 而 redirectTo 方 法 
会 先 关闭 当前 页 面 ， 然 后 跳 转 到 新 页 面 ， 没 有 办 法 再 返回 了 。 整 个 小 程序 只 能 保持 5 个 打开 的 页 面 。 


3. 下 拉 屏 幕 


代码 如 下 : 





Page ({ 
onPullDownRefresh: function() { 
console.log('onPullDownRefresh', new Date()) 


r 
stopPullDownRefresh: function() { 
wx.stopPullDownRefresh ({ 
complete: function (res) { 
console.log (res, new Date ()) 


}) 
} 
}) 





当 用 户 下 拉 操 作 的 时 候 ， 在 Console 输 出 当前 日 期 。 
4 弹出 自 定义 操作 菜单 


界面 如 图 6-1 所 示 。 





图 6-1 自 定 义 操作 菜单 


代码 如 下 : 





wx. showActionSheet ({ 
itemList: ['item1l', 'item2', 'item3','item4'], 
success: function(res) { 
if (!res.cancel) { 
console. log(res.tapIndex) ; 


} 
We 





代码 定义 了 4 个 操作 菜单 : item1、item2、item3、item4， 通 过 wx.showActionSheet 来 弹出 显示 。 





代码 如 下 : 





wx.showToast ({ 
title: ?成 功 ' 7 
icon: 'success', 
duration: 2000 
We 
setTimeout (function () { 
wx. hideToast () 
},1000) ; 





设置 1000 毫 秒 后 隐藏 。 





显示 模 态 弹 窗 如 图 6-2 所 示 。 


标题 
这 是 对 话 框 的 内 容 。 


取消 








代码 如 下 : 


wx. showModal ({ 
title: "标题 "， 
content: ' 这 是 对 话 框 内 容 '， 
success: function(res) { 
if (res.confirm) { 
console.1og(" 确 定 按钮 !) 7 


else { 
console.1log (“取消 按钮 ”)， 


6.2 网络 


微 信 小 程序 包括 四 种 类 型 的 网 络 请 求 : 普通 HTTPS 请 求 (wx.request) 、 上 传 文件 (wx.uploadFile) 、 下 载 文件 (wx.downloadFile) 、WebSocket 通 信 


(wx.connectSocket) 。 














在 微 信 小 程序 里 进行 网 络 通信 ， 只 能 和 指定 的 域名 进行 通信 ， 同 时 只 能 有 5 个 网 络 请 求 连 接 。 而 且 只 支持 HTTPS 请 求 ， 不 支持 HTTP 请 求 。 但 是 经 测试 发 现 ， 目 
前 HTTP 还 是 支持 的 ， 正 式 发 布 的 时 候 是 否 会 取消 支持 ， 还 有 待 观察 。 
































另外 微 信 小 程序 框架 还 提供 了 一 个 非常 关键 的 API: Websocket， 这 块 可 以 做 的 事情 非常 多 ， 大 家 可 以 发 挥 想像 空间 。 


具体 可 以 参考 7.5 节 “WebSocket 高 级 应 用 一 一 远程 控制 设备 ”的 案例 。 


6.3 ”本 地 数据 及 缓存 


每 个 微 信 小 程序 都 可 以 有 自己 的 本 地 缓存 ， 是 永久 存储 的 ， 最 大 不 超过 10M。 这 个 功能 的 推出 ， 是 在 通 往 Native 的 道路 上 所 做 的 重大 突破 。 应 用 瞬间 秒 开 ， 体 
验 爆棚 ， 最 逼近 原生 体验 的 方法 ， 不 像 原 来 的 公众 号 ， 刷 了 好 久 才 出 来 。 其 实 原理 很 简单 ， 就 是 预先 加 载 图 片 等 原生 数据 ， 不 需要 再 等 待 ， 但 是 第 一 次 还 是 要 下 载 
的 。 


有 了 缓存 操作 ， 也 就 意味 着 ，“ 小 程序 ”的 用 户 数据 可 以 缓存 起 来 ， 做 一 些 预 加 载 策略 提升 体验 ， 以 此 来 达到 接近 Native 体 验 的 目的 。 但 是 也 要 注意 ， 如 果 使 
用 另外 的 设备 登录 小 程序 ， 这 些 本 地 化 缓存 的 数据 将 读 取 不 到 了 。 


数据 缓存 的 接口 提供 了 同步 和 异步 两 套 方法 ， 方 法 名 上 就 能 分 得 很 清楚 ， 带 Sync 后 缀 的 为 同步 接口 ， 不 带 的 为 异步 接口 。 


数据 存储 接口 如 下 : 


wx. setStorage ({ 

key: "key" 

data:"value" 
} 
try { 

wx.setStorageSync('key', 'value') 

} catch (e) { 
} 


数据 读 取 接 口 如 下 : 


wx.getStorage ({ 
key: 'key', 
success: function(res) { 
console. log(res.data) 

} 
) 
try { 
var value = wx.getStorageSync ('key') 
if (value) 

// Do something with return value 


catch(e) { 
// Do something when catch error 





删除 缓存 数据 接口 如 下 : 


wx. removeStorage ({ 
key: 'key', 
success: function(res) { 
console. log(res.data) 
} 
} 
try { 
wx. removeStorageSync ('key") 
} catch (e) { 
// Do something when catch error 


} 





清空 本 地 接口 代码 : 





wx.clearStorage ( 

try { 
wx.clearStorageSync () 

} catch(e) { 

} 








查看 缓存 空间 的 信息 : 





wx.getStorageInfo ({ 
success: function(res) { 
console.log(res.keys) 
console. log (res.currentSize) 
console. log(res.limitSize) 
} 
} 
try { 
var res = wx.getStorageInfoSync () 
console. log(res.keys) 
console.log(res.currentSize) 
console.log(res.limitSize) 
catch (e) { 
// Do something when catch error 





返回 的 信息 包括 三 个 数据 项 : 
- keys: 当前 storage 中 所 有 的 key。 
“currentSize: 当前 缓存 所 占 空间 的 大 小 ， 单 位 为 KB。 
“ limitSize: 限制 的 空间 大 小 ， 单 位 为 KB。 

文件 操作 : 


1) wx.getSavedFileList: 功能 是 获取 本 地 已 保存 的 文件 列表 。 文 件 路 径 如 下 : 





filePath: wxfile:// xxxxxxxxxx.png 





2) wx.getSavedFilelnfo: 获取 某 个 已 保存 文件 的 信息 : 





wx.getSavedFileInfo ({ 
filePath: filePath, 
success: (res)=> { 
console.log (res) ; 
} 
} 





3) wx.removeSavedFile: 删除 本 地 已 保存 的 文件 : 





wx. removeSavedFile ({ 
filePath: filePath, 
success: (res)=> { 
console.10g (“删除 成 功 : ”+tes) 
} 
}) 





以 上 方法 都 只 能 操作 wx.saveFile 保 存 过 的 文件 。 
4) wx.saveFile: 保存 文件 到 本 地 。 


5) wx.openDocument: 打开 文档 的 内 容 ， 在 新 页 面 显示 ， 目 前 支持 : doc, xls, ppt. pdf. docx, xlsx, pptx: 





wx. downloadFile ({ 
url: 'http://www.apayado.com/docs/xiaochengxu.doc', 
success: (res)=> { 
var filePath = res.tempFilePath 
wx .openDocument ( { 
filePath: filePath, 


success: function (res) { 
console.log('res'); 


先 下 载 ， 再 打开 。 


64 设备 硬件 


这 里 提供 的 功能 主要 包含 查看 网 络 状态 、 系 统 信息 、 获 得 重力 与 罗盘 传感器 的 信息 。 





让 小 程序 读 取 重 力 和 罗盘 的 数据 是 最 激动 人 心 的 功能 了 ， 监 听 的 频率 是 每 秒 5 次 ， 以 后 就 可 以 摇 一 摇 啦 ， 哈 哈 。 还 可 以 做 些小 游戏 ， 可 是 
http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/16007/OEBPS/Text/..http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/16007/OEBPS/Text/..http://www.hzcourse.com/resource/readBook? 


path=/openresources/teach_ebookVuncompressed/16007/OEBPSVText/..， 为 什么 不 提供 蓝牙 API 呢 ?为 什么 不 提供 蓝牙 API 呢 ?为 什么 不 提供 蓝牙 API 呢 ? 





重要 的 事情 要 说 3 遍 ! 蓝牙 这 个 真 的 很 重要 啊 ! 








最 新 版 本 的 小 程序 提供 了 拨打 电话 的 AP1， 有 个 回调 函数 ， 拨 打 完 成 后 可 以 进行 一 些 处理 。 下 面 是 相关 功能 示例 。 


“ 获取 网 络 状 态 的 代码 片段 : 


Page ({ 
data: { 
hasNetworkType: false 
hy 
getNetworkType: function() { 
var that=this 
wx.getNetworkType ({ 
success: function(res) { 
console. log (res) 
that.setData ({ 
hasNetowrkType: true, 
networkType: res.subtype || res.netowrkType 
}) 
that .updata () 


: 获取 系统 信息 的 代码 片段 : 


Page ({ 
data: { 
systemInfo: {} 


getSystemInfo: function() { 
var that = this 
wx.getSystemInfo ({ 
success: function (res) { 
that .setData ({ 
systemInfo: res 


}) 
this.update () 


返回 res 参 数 包 含有 型 号 /语言 / 微 信 版 本 /长 度 / 宽 度 /DPI: 


console.log (res .model) 
console. log (res.pixelRatio) 
console. log (res .windowWidth) 
console. log (res .windowHeight) 
console.log (res. language) 
console. log(res.version) 


例子 如 下 : 


+ 手机 型 号 : iPhone 6 


- 微 信 版 本 : 6.3.9 


“ 罗盘 数据 : 


wx.onCompassChange (function (res) { 
console.log(res.direction) 
}) 


返回 参数 direction， 是 面 对 的 方向 度数 。 每 秒 钟 采 集 5 次 数据 。 


< 重力 数据 : 


wx.onAccelerometerChange (function (res) { 
console.log (res.x) 
console.log (res.y) 
console.log (res .2z) 

}) 








返回 X/Y/Z 坐 标 轴 。 每 秒 钟 采集 5 次 数据 。 


6.5 ” 微 信 开放 接口 


微 信 登录 是 通过 wx.login 这 个 API 登 录 。 与 移动 应 用 和 网 页 应 用 的 不 同 之 处 是 抛弃 了 access token 的 验证 方式 ， 而 是 采用 session_key 加 签名 的 方式 ， 为 小 程序 
与 服务 器 交换 敏感 数据 提供 了 对 称 加 密 方法 。 签 名 方法 对 小 程序 透明 ， 后 端 服务 实现 相应 的 解密 程序 以 及 登录 态 验证 和 控制 能 力 。 





执行 wx.login 后 可 以 通过 wx.checkSession 方 法 来 判断 session 是 否 过 期 : 


wx.checkSession ({ 
success: function () { 
console.log(“session 未 过 期 ”) ; 
ly 
fail: function () { 
console.log( ‘sessionwitjy’ ); 
wx. login (); 
J 
]) 7 























用 户 信息 可 以 通过 wx.getUserlnfo 获 取 ， 包 括 敏感 数据 在 内 的 完整 用 户 信息 是 加 密 的 (包括 openid、Unionld) ， 微 信 公 众 平台 小 程序 文档 提供 了 相关 数据 解 
密 算法 。 


encryptData 解 密 后 为 以 下 json 结 构 : 


"openId" : "OPENID", 
"nickName": "NICKNAME", 
"gender": 1, 

"city": "CITY", 
"province": "PROVINCE", 
"country": "COUNTRY", 
"avatarUrl": "AVATARURL", 
"unionId": "UNIONID" 





消息 和 其 他 公众 号 的 使 用 方式 是 一 样 的 ， 定 义 模板 ， 发 送 模板 消息 。 
微 信 支付 相当 简单 了 ， 只 要 调用 wx.requestPayment 方 法 就 可 以 了 。 


社交 是 API 功 能 ,是 腾讯 社交 基因 最 强大 的 体现 ， 相 信和 其 他 公司 的 产品 很 难 与 微 信 抗 衡 。 但 是 小 程序 依然 没 开放 用 户 和 用 户 之 间 的 关系 数据 。 


6.6 媒体 


媒体 组 件 和 API 的 提供 ， 可 以 播放 音频 、 视 频 和 图 片 ， 这 给 小 程序 带 来 了 丰富 娱乐 的 可 能 性 。 配 合 相应 的 AP1， 就 可 以 做 一 些 影 音 播放 器 啦 ， 想 想 看 ， 自 己 做 一 
个 暴风 影音 或 者 QQ 音乐 ， 是 不 是 很 期 待 呢 ? 或 者 可 以 基于 像 腾讯 云 平台 提供 的 流 媒 体 转 码 和 播放 服务 ， 搭 建 自己 的 直播 小 程序 应 用 啦 。 








但 是 我 在 这 里 想 说 的 是 另外 一 个 功能 : 录音 功能 。 


它 给 了 开发 者 在 语音 创作 方面 一 个 非常 大 的 发 挥 空间 。 你 可 以 把 录取 的 音频 文件 ， 提 交 到 后 端的 云 上 进行 语音 识别 和 解析 ， 实 现 各 类 创新 的 产品 。 


比如 ， 可 以 基于 此 开发 一 个 微 信 的 语音 秘书 小 程序 ， 想 想 siri， 多 有 乐趣 。 这 里 简单 的 讲 一 下 录音 的 例子 : 


界面 如 图 6-3 所 示 。 


0:00:00 





图 6-3 ”录音 功能 


数据 格式 如 下 : 





data: { 
recording: false, 
playing: false, 
hasRecord: false, 
recordTime: 0 
playTime: 0 
formatedRecordTime: '00:00:00', 
formatedPlayTime: '00:00:00' 
} 





点 击 麦克 风 图 标 开始 录音 的 代码 如 下 : 





startRecord: function() { 
this.setData({ recording: true }) 
var that = this 
var interval = setInterval(function() { 
that.data.recordTime += 1 
that.setData ({ 
formatedRecordTime: util.formatTime (that.data.recordTime) 
} 
},1000) 
wx. startRecord ({ 
success: function (res) { 
that.setData ({ 
hasRecord: true, 
tempFilePath: res.tempFilePath, 
formatedPlayTime: util.formatTime (that.data.playTime) 
} 
} 
complete: funtion() { 
that.setData({ recording: false }) 
clearInterval (interval) 
} 
} 
} 





再 点 击 停止 录音 的 代码 : 





stopRecord: function() { 
wx. stopRecord () 
} 





接 下 来 是 可 以 上 传 到 云端 进行 语义 分 析 ， 但 是 我 们 这 里 简单 起 见 ， 只 是 播放 录音 就 可 以 了 。 代 码 片段 如 下 : 





playVoice: function() { 
var that = this 
playTimeInterval = setInterval(function() { 
that.data.playTime += 1 
that.setData ({ 
playing: true, 
formatedPlayTime: util. formatTime (that.data.playTime) 
} 
},1000) 
wx.playVoice ({ 
filePath: this.data.tempFilePath, 
success: function () { 
clearInterval (playTimeInterval) 
that.data.playTime = 0 
that.setData ({ 
playing: false, 
formatedPlayTime: util. formatTime (that.data.playTime) 





暂停 /停止 的 代码 如 下 : 





pauseVoice: function() { 
clearInterval (playTimeInterval) 
wx.pauseVoice () 
this.setData ({ 
playing: false 
} 
}, 
stopVoice: function() { 
clearInterval (playTimeInterval) 
this.data.playTime = 0 
this.setData ({ 
playing: false 
formatedPlayTime: util. formatTime (this.data.playTime) 








}) 


wx. StopVoice () 
} 





其 他 媒体 类 的 开发 ， 我 们 在 下 一 章 中 将 会 重点 介绍 。 


6.7 ”后 端 开 友 与 设计 

对 于 小 程序 来 说 ， 不 论 是 提供 的 框架 、 组 件 ， 还 是 AP1， 基 本 上 都 是 围绕 着 前 端 页 面 进行 的 构建 和 开发 ， 而 最 要 和 后 端的 服务 相关 联 ， 所 以 基本 上 都 要 
通过 网 络 请 求 的 APl 来 进行 通信 。 

后 端 开 发 的 几 个 关键 点 如 下 : 


1) 最 适用 的 就 是 最 好 的 ， 而 不 是 追求 最 新 的 技术 : 系统 要 稳定 ， 响 应 要 迅速 ， 并 能 适应 业务 的 变化 ， 还 要 能 给 开发 带 来 便利 。 





2) 管理 和 监控 不 可 少 : 无 论 业 务 开发 如 何 忙 ， 都 要 把 监控 和 管理 跟 上 ， 要 不 然 出 了 事 也 不 知道 怎么 回 事 。 


3) 安全 、 容 灾 、 故 障 恢复 : 确保 数据 和 软 硬 件 不 会 丢失 、 泄 密 、 损 坏 。 即 便 有 损坏 ， 也 要 能 及 时 恢复 。 





对 于 小 程序 来 说 ， 前 后 台 通 信 的 数据 格式 基本 上 都 是 用 son 格 式 来 传输 的 ， 所 以 一 定 要 确保 json 格 式 的 正确 性 ， 对 于 异常 的 处 理 要 封装 好 。 











第 7 章 “小 程序 经 典 案例 


本 章 将 以 实际 的 应 用 场景 案例 ， 来 闸 述 小 程序 项 目的 开发 过 程 及 代码 实现 ， 帮 助 开 发 者 积累 小 程序 项 目 开 发 的 实战 经 验 。 我 们 会 阐述 下 面 这 五 个 经 典 案例 : 





* 文件 上 传 与 下 载 小 相册 ; 





“ 流 媒体 转 码 与 播放 视频 点 播 ; 
< 互动 一 一 高 冷 机 器 人 ， 


Be 





信息 点 ; 














-WebSocket 高 级 应 用 一 一 远程 控制 设备 。 


7.1 文件 上 传 与 下 载 一 一 小 相册 





7.1.1 功能 详解 


本 案例 实现 以 下 相册 功能 


- 列 出 COS 服 务 器 中 的 图 片 列表 。 








:点击 左 上 角 上 传 图 片 图 标 ， 可 以 调用 相机 拍照 或 从 手机 相册 选择 图 片 ， 并 将 选中 的 图 片上 传 到 COS 服 务 器 中 。 














“ 轻 按 任 意图 片 ， 可 进入 全 屏 图 片 预览 模式 ， 并 可 左右 滑动 切换 预览 图 片 。 











. 长 按 任意 图 片 ， 可 将 其 保存 到 本 地 ， 或 从 COS 中 删除 。 





小 相册 项 目 例 如 图 7-1 所 示 。 


7.2 流 媒 体 转 码 与 播放 一 一 视频 点 播 


小 程序 提供 了 媒体 相关 的 AP1， 完 全 可 以 打造 强大 而 丰富 的 娱乐 功能 。 本 案例 会 讲解 流 媒体 的 一 些小 操作 ， 实 现 本 地 及 网 络 视频 点 播 功能 


7.3 ”互动 一 一 高 冷 机 器 人 


本 案例 主要 是 想 展 示 WebSocket 的 用 法 ， 更 多 的 改进 可 以 在 服务 端 去 实现 。 


7.4 LBS 应 用 周边 信息 点 





小 程序 框架 提供 了 地 图 相关 的 API 调 用 ， 下 面 我 们 就 写 了 一 个 地 图 的 Demo， 和 希望 能 给 大 家 带 来 一 些 有 价值 的 参考 。 


7.5 ”WebSocket 高 级 应 用 一 一 远程 控制 设备 


7.5.1 应 用 场景 





在 电脑 与 投影 仪 组 成 的 家 庭 影院 中 ， 通 过 微 信 小 程序 来 远程 控制 投影 屏幕 。 


第 8 章 ”小 程序 优化 与 演进 


8.1 ”为 什么 选择 小 程序 ， 而 不 是 公众 号 或 App 


微 信 小 程序 能 实现 的 事务 ，App 理 论 上 都 能 实现 ;但 App 能 实现 的 功能 ， 微 信 小 程序 却 受 限于 框架 与 微 信 开 放 的 APl， 就 不 一 


App 应 用 的 关系 如 图 8-1 所 示 。 


cb 


ÆRE 


做 。 所 以 微 信 小 程序 、 微 信 及 


APPs ( App 应 用 集合 ) 








图 8-1 微 信 小 程序 之 范畴 示意 


APP (App 应 用 集合 ) 未 来 将 包含 若干 的 小 程序 。 小 程序 最 适合 实现 单一 的 、 刚 需 、 交 互 逻辑 不 太 复 杂 的 功能 或 服务 ， 足 够 轻 量 与 高 效 。 这 也 符合 微 信 团队 所 
BORA: 用 完 即 走 原则 。 


小 程序 还 有 一 个 极其 重要 的 场景 ， 即 作为 App 前 期 开发 的 一 种 思路 验证 。 或 者 将 App 的 某 个 常用 功能 模块 实现 为 小 程序 ， 也 可 以 为 App 引 流 。 
但 小 程序 不 可 能 完全 替代 App， 主 要 原因 有 : 

“小 程序 作为 微 信 内 场景 ， 如同 阅读 文章 一 样 ， 同 样 会 遇 到 使 用 小 程序 和 聊天 之 间 的 矛盾 ， 这 注定 了 小 程序 不 能 做 很 重 很 长 时 间 的 操作 。 

+ 企业 应 用 场景 较 多 或 者 面向 的 对 象 不 一 样 ， 则 所 有 的 能 力 都 放 在 微 信 内 也 不 一 定 合适 。 

小 程序 的 入 口 可 能 会 比较 零散 。 未 来 大 量 的 小 程序 出 现 ， 如 何 让 用 户 保持 长 久 关注 以 及 方便 快速 找到 使 用 ， 这 里 可 能 会 有 难度 。 


- 公众 号 主要 基于 HTML5， 可 以 实现 丰富 且 比 较 重 的 功能 ， 开 发 较 复杂 ， 但 体验 上 也 较 小 程序 要 差 一 些 。 





第 8 章 ”小 程序 优化 与 演进 


8.1 ”为 什么 选择 小 程序 ， 而 不 是 公众 号 或 App 


微 信 小 程序 能 实现 的 事务 ，App 理 论 上 都 能 实现 ; 但 App 能 实现 的 功能 ， 微 信人 小 程序 却 受 限于 框架 与 微 信 开 放 的 AP1， 就 不 一 定 能 做 。 所 以 微 信 小 程序 、 微 信 及 
App 应 用 的 关系 如 图 8-1 所 示 。 


APPs (App 应 用 集合 ) 





图 8-1 微 信 小 程序 之 范畴 示意 





APP (App 应 用 集合 ) 未 来 将 包含 若干 的 小 程序 。 小 程序 最 适合 实现 单一 的 、 刚 需 、 交 互 逻辑 不 太 复 杂 的 功能 或 服务 ， 足 够 轻 量 与 高 效 。 这 也 符合 微 信 团队 所 
要 求 的 : 用 完 即 走 原则 。 


小 程序 还 有 一 个 极其 重要 的 场景 ， 即 作为 App 前 期 开发 的 一 种 思路 验证 。 或 者 将 App 的 某 个 常用 功能 模块 实现 为 小 程序 ， 也 可 以 为 App 引 流 。 
但 小 程序 不 可 能 完全 替代 App， 主 要 原因 有 : 


“ 小 程序 作为 微 信 内 场景 ， 如 同 阅读 文章 一 样 ， 同 样 会 遇 到 使 用 小 程序 和 聊天 之 间 的 矛盾 ， 这 注定 了 小 程序 不 能 做 很 重 很 长 时 间 的 操作 。 





+ 企业 应 用 场景 较 多 或 者 面向 的 对 象 不 一 样 ， 则 所 有 的 能 力 都 放 在 微 信 内 也 不 一 定 合适 。 
“ 小 程序 的 入 口 可 能 会 比较 零散 。 未 来 大 量 的 小 程序 出 现 ， 如 何 让 用 户 保 持 长 久 关注 以 及 方便 快速 找到 使 用 ， 这 里 可 能 会 有 难度 。 


- 公众 号 主要 基于 HTML5， 可 以 实现 丰富 且 比 较 重 的 功能 ， 开 发 较 复杂 ， 但 体验 上 也 较 小 程序 要 差 一 些 。 


8.2 ”未 来 演进 方向 探讨 


1. 小 程序 适用 场景 演进 





由 于 小 程序 是 微 信 内 场景 ， 必 然 面临 阅读 公众 号 文章 一 样 ， 存 在 使 用 小 程序 与 消息 聊天 之 间 的 矛盾 。 小 程序 显然 不 适合 做 非常 重 、 或 时 间 非 常 长 的 操作 。 这 样 
也 必然 限制 小 程序 的 应 用 场景 。 我 们 认为 未 来 有 两 方面 可 以 发 展 : 一 方面 提升 小 程序 开发 的 能 力 ， 另 一 方面 与 微 信 聊天 切换 的 体验 进一步 优化 。 


2. 小 程序 的 入 口 及 有 效 发 现 新 小 程序 


小 程序 未 来 非常 多 的 情况 下 ， 找 到 自己 需要 的 小 程序 会 变 得 越 来 越 难 。 小 程序 的 入 口 若 继续 比较 深 或 比较 散 ， 那 么 务必 对 有 效 找 到 所 需要 的 小 程序 提出 要 求 。 
这 一 方面 的 演进 方向 ， 极 有 可 能 是 搜索 、 推 荐 。 


2016 年 11 月 18 日 晚 ， 张 小 龙 在 其 朋友 圈 发 布 一 张 截图 : 写 着 “程序 猿 的 一 小 步 ， 程 序 的 一 大 步 ”。 该 截图 显示 在 Android 系 统 上 ， 小 程序 的 入 口 可 上 升 到 手机 
桌面 。 未 来 不 排除 iOS 系 统 同样 有 可 能 上 升 到 桌面 。 


3. 小 程序 的 开发 与 运营 





小 程序 的 运营 同样 面临 着 与 公众 号 运营 类 似 的 注册 、 认 证 及 打击 问题 。 





由 于 微 信 小 程序 的 框架 仍 在 不 断 升级 演进 中 ， 如 同 吴 晓 波 描述 腾讯 的 快速 发 展 一 样 : “没有 任何 一 个 摄影 师 或 者 记者 ， 能 够 准确 地 描述 乃至 定格 一 座 正在 喷发 
中 的 火山 ”， 微 信 团 队 仍 会 带 来 更 丰富 的 组 件 、 开 放 更 丰富 的 API 接 口 。 


8.3 ”小 程序 持续 优化 方法 





微 信 团 队 对 Web 开 发 工具 持续 与 快速 的 迭代 升级 ， 为 小 程序 开发 者 集成 更 强大 的 功能 及 开放 更 多 的 API。 需 要 开发 者 持续 关注 并 应 用 。 
我 们 将 目前 小 程序 开发 过 程 中 常见 的 问题 及 优化 方法 在 这 里 介绍 一 下 。 
1. 网 络 请 求 接口 域名 的 限制 解决 


小 程序 对 网 络 请 求 接口 域名 有 明确 要 求 。 针 对 4 种 服务 器 域名 (request、socket、uploadfile、downloadfile) 每 种 只 能 指定 一 个 合法 域名 。 这 样 ， 对 于 后 台 
业务 十 分 复杂 ， 并 使 用 不 同 域名 对 业务 进行 划分 的 应 用 就 会 有 问题 ， 比 如 腾讯 的 自选 股 ， 后 台 就 十 分 复杂 。 应 对 这 个 限制 ， 腾 讯 自 选 股 最 终 通过 统一 代理 方式 将 多 
个 域名 收敛 为 一 个 域名 ， 由 代理 层 将 请 求 转发 。 


2. 应 用 内 部 支持 https 请 求 


微 信人 小 程序 文档 中 要 求 wx.request 网 络 请 求 发 起 的 是 HTTPS 请 求 ， 这 对 于 有 各 种 接口 的 应 用 也 带 来 影响 。 仍 以 腾讯 自选 股 为 例 ， 通 过 在 统一 代理 层 部 署 证 书 支 
持 HTTPS 请 求 ， 这 样 后 端 RS 机 器 无 需 改动 ， 成 功 解决 必须 是 HTTPS 请 求 的 问题 。 


iOS 规 则 自 2017.1 开 始 服务 器 会 只 支持 HTTPS 协 议 的 接口 ， 所 以 ， 现 在 开始 尽量 统一 为 HTTPS。 


3. 小 程序 仅 支 持 5 个 并 发 的 网 络 请 求 





微 信 小 程序 官方 文档 中 也 提 到 了 ， 同 时 打开 页 面 有 5 个 的 限制 。 所 以 不 适合 做 太 深层 级 页 面 的 交互 应 用 。 像 腾讯 自选 股 这 类 深层 级 页 面 交互 的 应 用 ， 可 以 使 用 动 
态 接口 将 页 面 需要 的 数据 进行 合并 ， 通 过 一 个 接口 获取 页 面 所 需 数据 。 


4. 多 个 页 面 代码 共用 问题 





小 程序 页 面 与 页 面 之 间 代 码 复 用 性 差 。 当 多 个 页 面 共用 一 个 js 或 者 json 的 时 候 (比如 详情 页 面 ) ， 需 要 打包 和 构建 工具 的 支持 (如 用 webpack) 。 没 有 工具 就 
只 能 自己 手工 复制 ， 一 旦 涉及 修改 的 时 候 ， 要 修改 多 个 页 面 就 比较 麻烦 了 。 例 如 : 目录 层级 如 下 ， 而 其 实 000343.js 和 000395.js 的 文件 内 容 完全 一 样 ， 就 需要 用 到 一 
些 打包 工具 去 辅助 生成 ， 否 则 就 要 手动 复制 。 


/detail 
000343 .wxml 
000343.4s 
000343 .wxss 
000395.wxml 
000395.4s 
000395.wxss 





5. 关 于 有 状态 的 登录 问题 


关于 登录 ， 目 前 小 程序 不 支持 cookie， 而 是 采用 前 端 利用 微 信 提供 的 接口 获取 登录 凭证 code，server 端 再 用 code 获 取 密 钥 session_key 的 方式 对 用 户 数据 完成 
加 密 解密 ， 整 个 过 程 需要 server 端 对 已 有 的 登录 体系 进行 再 次 封装 ， 而 本 地 的 登录 态 可 以 利用 微 信 提 供 的 本 地 存储 进行 保存 ， 如 图 8-2 所 示 。 





2. code 
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3. Se 3. sessionKey 











HTTPS AES-128-CBS 


图 8-2 ”小 程序 有 状态 登录 实现 架构 





6. 开 发 目录 与 发 布 目录 隔离 管理 


建议 引进 webpack 将 开发 目录 与 发 布 目录 区 分 开 来 。webpack 是 一 个 前 端 资源 加 载 / 打包 工具 ， 它 能 把 各 种 资源 ， 例 如 JS ( 含 JSX) 、coffee、 样 式 ( 含 
less/sass) 、 图 片 等 都 作为 模块 来 使 用 和 处 理 。 


通过 引入 webpack， 可 以 实现 对 es6+sass+ postcss 的 支持 ， 更 加 灵活 的 模块 化 体系 ， 成 功 隔离 了 开发 目录 和 发 布 目录 ， 如 图 8-3 所 示 。 
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图 8-3 ”webpack 隔 离 目录 


如 图 所 示 ， 我 们 指定 发 布 目录 到 / pub， 图 片 和 CSS 抽 取 合 并 后 生成 .wxss 文 件 ， 例 如 allmatch 页 面 的 资源 文件 全 在 component/allmatch 文 件 夹 内 ， 打 包 后 生 
成 的 allmatch.wxss 文 件 直接 放 在 pub 目 录 下 。 


由 于 document、window 对 象 的 限制 ，Babel runtime 相 关 、Commonchunk、code spliting、imports-loader 等 插件 都 不 可 用 ， 想 接 入 webpack 的 开发 者 
们 要 引起 注意 。 


开发 目录 和 发 布 目录 分 开 后 ， 针 对 每 次 开发 目录 代码 变更 后 ， 都 需要 打包 文件 才能 看 到 代码 效果 的 问题 ， 这 样 我 们 就 需要 编写 自动 更 新 模块 ， 保 证 发 布 目 录 与 
开发 目录 效果 同步 。 


webpack 还 有 一 个 小 问题 ， 就 是 在 调试 的 过 程 中 会 生成 许多 不 必要 的 文件 ， 为 了 解决 这 个 问题 ， 需 要 写 了 一 个 清理 发 布 文件 夹 的 脚本 ， 每 次 打包 完成 后 会 自动 
运行 ， 清 理 非 最终 所 需 文件 。 清 理 不 必要 文件 代码 如 下 ， 供 大 家 参考 : 











var fs = require('fs'); 

var files = fs.readdirSync('./pub'); 
console.log('clean files: '); 
files.forEach(function (file)) { 


if (file.indexOf('app') === -1 && (file.indexOf('. 
wxss') !== -1 
|| file.indexOf('.js') !== -1 


|| file.indexOf('.map') !== -1)) { 
fs.unlink('./pub/' + file); 
console. log (file); 





7. 小 程序 代码 包 大 小 优化 问题 


小 程序 的 开发 工具 支持 简单 的 模块 化 ，page 路 径 可 单独 设置 ， 但 是 提交 代码 包 的 大 小 限制 为 1M ， 而 小 程序 没有 提供 相应 的 文件 压缩 与 全 并。 我们 可 以 先行 压 
缩 ， 再 提交 。 


RA 微 信 小 程序 平台 运营 规范 


A.1 原则 及 相关 说 明 


微 信 最 核心 的 价值 就 是 连接 一 一 提供 一 对 一 、 一 对 多 和 多 对 多 的 连接 方式 ， 从 而 实现 人 与 人 、 人 与 智能 终端 、 人 与 社交 化 娱乐 、 人 与 硬件 设备 的 连接 ， 同 时 连 
接 服务 、 资 讯 、 商 业 。 


微 信和 团队 一 直 致 力 于 将 微 信 打 造成 一 个 强大 的 、 全 方位 的 服务 工具 。 在 此 基础 上 ， 我 们 推出 了 微 信 小 程序 这 个 产品 ， 提 供给 微 信 小 程序 的 开发 者 在 微 信 内 搭建 
和 实现 特定 服务 、 功 能 的 平台 。 通 过 全 面 开放 的 能 力 ， 我 们 将 更 多 连接 的 可 能 给 予 企业 和 服务 提供 者 ， 并 为 微 信 小 程序 提供 基础 的 接 入 能 力 、 运 营 环 境 和 规则 体 
系 ， 进 而 帮助 更 多 的 企业 和 服务 提供 者 建立 自己 的 品牌 ， 将 商业 机 会 带 给 整个 微 信 产业 链 。 


在 开始 微 信 小 程序 的 开发 前 ,我 们 希望 微 信 小 程序 开发 者 (以 下 也 称 为 “你 ”) 已 经 仔细 阅读 了 《 微 信 小 程序 接 入 指南 》《 微 信 小 程序 设计 规范 》《 微 信 小 程 
序 开发 指南 》 等 ; 同时 ， 我 们 也 为 你 准备 了 微 信 小 程序 平台 常见 拒绝 情形 。 和 希望 这 些 指南 和 规范 ， 能 够 在 一 定 程度 上 帮助 你 解决 开发 、 运 营 微 信 小 程序 过 程 中 所 遇 
到 的 疑问 。 


我 们 希望 你 提交 的 微 信 小 程序 ， 能 够 符合 微 信 团队 一 直 以 来 的 价值 观 ， 那 就 是 : 一 切 以 用 户 价值 为 依 归 、 让 创造 发 挥 价值 、 好 的 产品 是 用 完 即 走 ， 以 及 让 商业 
化 存在 于 无 形 之 中 。 在 切实 符合 用 户 的 合理 需求 和 利益 的 前 提 下 ， 通 过 微 信 小 程序 所 提供 的 功能 和 服务 ， 为 海量 微 信用 户 提 供 具有 持续 价值 和 高 品质 的 服务 。 我 们 
期 待 你 来 提交 你 的 微 信 小 程序 。 


使 用 微 信 小 程序 平台 的 服务 ， 你 必须 阅读 并 遵守 《 微 信 小 程序 平台 服务 条 款 》， 以 及 腾讯 为 此 制定 的 专项 规则 等 。 本 运营 规范 是 在 上 述 协议 及 规则 基础 上 进行 
解释 和 说 明 ， 相 关内 容 旨 在 帮助 你 更 加 清晰 地 理解 和 遵守 相关 协议 和 规则 ， 以 便 能 够 更 加 顺利 地 在 微 信 小 程序 平台 进行 运营 ， 而 不 是 修改 或 变更 上 述 协议 及 规则 中 
的 任何 条 款 。 如 果 我 们 认为 你 的 微 信 小 程序 违反 了 我 们 的 条 款 、 相 关 平 台 规 则 或 法 律 法 规 ， 或 对 微 信 公 众 平台 、 微 信 开 放 平 台 造成 了 影响 ， 则 微 信 有 权 对 你 的 微 信 
小 程序 采取 强制 措施 ， 包 括 但 不 限于 限制 你 的 微 信 小 程序 访问 平台 功能 、 下 架 小 程序 、 要 求 删除 数据 、 终 止 协议 等 。 





1. 注 册 提 交规 范 


1.1 提供 给 用 户 可 以 联络 到 开发 者 的 链接 或 电子 邮箱 等 有 效 联系 方式 。 





1.2 ”提供 给 平台 能 联络 到 开发 者 的 管理 员 微 信号 ， 并 保证 该 微 信 号 真实 有 效 。 


1.3 ”你 所 提交 的 微 信 小 程序 ， 不 得 关联 至 你 不 具有 完整 合法 权益 或 不 具备 完整 授权 的 网 站 、 应 用 程序 、 产 品 或 服务 等 。 


14 为 保障 平台 和 其 他 用 户 的 安全 、 稳 定 ， 我 们 会 在 你 提交 微 信 小 程序 、 运 营 微 信 小 程序 等 全 过 程 中 ， 要 求 你 提供 相应 的 材料 、 进 行 相应 的 修改 等 补充 和 调 
整 ， 你 应 当 按照 我 们 的 要 求 协助 我 们 进行 审核 ， 否 则 ， 将 影响 审核 的 结果 。 



































1.5 不 允许 批量 注册 、 重 复 提交 大 量 相似 的 微 信 小 程序 。 


16 不 允许 重复 提交 多 个 相同 或 同 质 化 严重 的 微 信 小 程序 。 





2. 基 本 信息 规范 





2.1” 微 信 小 程序 名 称 、icon、 和 简介、 描述 等 信息 均 不 得 合 有 政治 敏感 、 色 情 、 暴 力 血腥 、 私 怖 内 容 及 国家 法 律 法 规 禁 止 的 其 他 违法 内 容 ， 未 经 授权 不 得 使 用 第 
三 方 享有 合法 权益 的 商标 、 品 牌 标 识 等 内 容 或 与 之 相似 的 内 容 、 人 信息、 特殊 角 标 ， 侵 犯 他 人 合法 知识 产权 ， 也 不 得 含有 其 他 侵犯 他 人 合法 权益 (包括 但 不 限于 肖像 
权 、 名 誉 权 、 隐 私 权 、 姓 名 权 等 ) 的 内 容 。 











2.2， 微 信 小 程序 icon 必 须 清晰 ， 不 能 含有 其 他 水 印信 息 。 


2.3 ”小 程序 的 简介 和 描述 需 明确 介绍 微 信 小 程序 的 功能 ， 准 确 反 映 微 信 小 程序 的 核心 体验 ， 并 保持 最 新 。 











2.4” 微 信 小 程序 的 名 称 、icon、 简 介 等 基本 信息 ， 相 互 之 间 必须 有 所 关联 。 





2.5 ” 微 信 小 程序 的 名 称 和 简介 、 描 述 中 ， 不 得 温 有 商业 化 用 语 、 热 门 微 信 小 程序 名 称 、“ 国 家 级 ”、“ 最 高 级 ”等 新 广告 法 明令 禁止 或 其 他 无 关 的 词语 。 


2.6” 微 信 小 程序 的 名 称 不 得 以 电话 、 邮 件 、 日 历 等 广义 归纳 类 、 普 遍 且 不 具有 识别 性 的 词汇 来 命名 ， 从 而 干扰 搜索 结果 。 


3. 功 能 设置 规范 


3.1 微 信 小 程序 所 实际 提供 的 服务 和 内 容 ， 需 与 小 程序 的 简介 一 致 ， 且 不 存在 隐藏 类 目 。 


3.2 ” 微 信 小 程序 的 核心 功能 ， 必 须 在 小 程序 首页 得 到 体现 。 


3.3 ” 微 信 小 程序 应 向 用 户 提供 基本 的 功能 指引 ， 包 括 描述 或 截图 等 形式 。 











3.4 微 信 小 程序 的 服务 范围 需 与 实际 填写 的 类 目 和 标签 一 致 ， 也 需 和 自身 所 提供 的 服务 一 致 ， 且 不 应 超出 小 程序 平台 的 类 目 库 范 围 。 如 游戏 、 直 播 、 虚 拟 物品 
购买 功能 等 均 尚未 开放 。 


3.5 ” 微 信 小 程序 的 功能 不 能 过 于 简单 ， 提 供 的 功能 不 应 与 其 他 微 信 小 程序 同 质 化 严重 。 











3.6 “未 经 腾讯 公司 授权 的 情况 下 ， 微 信人 小 程序 的 添加 ， 必 须 是 免费 的 ， 不 得 设置 付费 添加 。 











3.7 ”未 经 腾讯 公司 授权 的 情况 下 ， 不 得 提供 与 微 信 客户 端 功 能 相同 或 者 相似 的 功能 。 


o 


3.8 微 信 小 程序 功能 的 使 用 ， 不 应 依赖 于 其 他 微 信 小 程序 ， 即 不 得 以 添加 关注 或 使 用 其 他 微 信人 小 程序 为 条 件 ; 未 经 允许 或 未 经 腾讯 公司 授权 的 情况 下 ， 也 不 得 


展示 或 者 推荐 其 他 微 信 小 程序 。 


3.9 ” 微 信 小 程序 应 设置 侵权 投诉 机 制 ， 处 理 用 户 间 的 权益 纠纷 。 
4. 主 体 规 范 


41 微 信 小 程序 的 开发 、 运 营 者 应 当 符 合法 律 、 法 规 等 规范 性 文件 的 规定 ， 任 何 有 合理 理由 认为 存在 违反 法 律 、 法 规 或 监管 要 求 的 情况 的 ， 将 会 被 拒绝 。 








42 你 应 当 按照 我 们 的 要 求 提供 相应 的 审批 、 备 案 等 资质 文件 材料 ， 否 则 ， 我 们 有 理由 相信 你 提交 的 微 信 小 程序 存在 违反 法 律 、 法 规 或 监管 要 求 的 情况 。 














43 ”任何 有 合理 理由 认为 从 事 或 为 从 事 违法 行为 、 非 法 活动 提供 便利 、 协 助 的， 将 会 被 拒绝 。 

















44 未 取得 法 定 许可 证 件 或 牌照 ， 发 布 、 传 播 或 从 事 相关 经 营 活 动 的 ， 我 们 有 权 拒绝 。 


5. 行 为 规范 














51 ， 微 信 小 程序 的 页 面 内 容 中 ， 不 得 存在 诱导 类 行为 ， 包 括 但 不 限于 诱导 分 享 、 诱 导 添 加 、 诱 导 关 注 、 诱 导 下 载 等 ， 如 不 得 要 求 用户 分 享 、 添 加 、 关 注 或 下 载 


后 才 可 操作 ; 不 得 含有 明示 或 暗示 用 户 分 享 的 文案 、 图 片 、 按 钮 、 浮 层 、 弹 窗 等 ;不 得 通过 利益 诱惑 诱导 用 户 分 享 、 传 播 ; 不 得 用 夸张 言语 来 胁迫 、 引 诱 用 户 分 


40 


} 


或 
| 
o 





; 不 得 强制 或 诱导 用 户 添加 小 程序 。 


5.2 ”不 得 存在 恶意 刷 量 、 刷 单 等 行为 。 


53 ”未 经 腾讯 书面 许可 ， 不 得 使 用 或 推荐 、 介 绍 使 用 插件 、 外 挂 或 其 他 违规 第 三 方 工具 、 服 务 接 入 本 服务 和 相关 系统 。 





54 不 得 滥用 模板 消息 ， 包 括 但 不 限于 利用 模板 消息 骚扰 用 户 和 广告 营销 。 


5.5 “不 得 存在 导致 腾讯 软件 在 终端 设备 系统 、 应 用 程序 商店 、 市 场 等 必要 的 使 用 环境 或 下 载 渠 道中 发 生 下 架 、 下 线 、 终 止 提供 服务 、 不 兼容 等 不 利 影响 的 内 








5.6 “完成 注册 后 ， 如 账号 长 期 未 登录 ， 微 信 小 程序 可 能 被 终止 使 用 ， 终 止 使 用 后 注册 所 使 用 的 邮箱 、 身 份 证 、 微 信号 等 信息 可 能 将 被 取消 注册 状态 。 








5.7 ”不 得 通过 微 信人 小 程序 实施 多 级 分 销 欺 诈 行为 ， 发 布 分 销 信息 诱导 用 户 进行 添加 、 分 享 或 直接 参与 。 一 经 发 现存 在 此 类 行为 ， 微 信 有 权 对 其 进行 限制 功能 直 











至 下 架 处 理 ， 并 有 权 拒 绝 再 向 该 主体 提供 服务 。 





6. 信 息 内 容 规 范 





6.1 ” 微 信 小 程序 不 得 发 布 、 传 送 、 传 播 、 储 存 国 家 法 律 法 规 禁止 的 以 下 信息 内 容 : 








6.1.1 ”反对 宪法 所 确定 基本 原则 ， 危 害 国 家 安全 、 泄 露 国家 秘密 、 苏 覆 国家 政权 、 破 坏 国家 统一 、 损 害 国家 荣誉 和 利益 。 


6.1.2 ”有 反 政 府 、 反 社会 ,或 存在 炉 动 性 的 涉 政 言 论 、 散 布 谣言 ， 扰 乱 社 会 秩序 ， 破 坏 社 会 稳定 。 





6.1.3 “” 炉 动 民 族 仇 恨 、 民 族 歧 视 、 破 坏 民族 团结 、 破 坏 国家 宗教 政策 、 宣 扬 有 邪教 和 封建 迷信 。 


6.1.4 ”展示 人 或 动物 被 杀 纸 、 致 残 、 枪 击 、 针 刺 或 其 他 伤害 的 真实 图 片 ， 描 述 暴力 或 虐待 儿童 的 ,或 包含 宣扬 暴力 血腥 内 容 。 











6.1.5 ”传播 淫秽 、 色 情 或 低俗 信息 ， 包 括 但 不 限于 暴 圳 图片、 挑逗 内 容 等 ， 或 包含 非法 色情 交易 的 信息 。 





6.1.6 包含 赌博 、 竞 猜 和 抽奖 信息 的 。 





6.1.7 ”含有 虚假 、 欺 诈 或 冒充 类 内 容 ， 包 括 但 不 限于 虚假 红包 、 虚 假 活动 、 虚 假 宣传 ， 仿 冒 腾讯 官方 或 他 人 业务 ， 可 能 造成 微 信用 户 混淆 。 


6.1.8 ”公然 侮辱 或 者 诽谤 他 人 ， 揭 露 他 人 隐私 ， 侵 害 他 人 合法 权益 的 。 





6.1.9 未 经 授权 ， 擅 自 使 用 他 人 商标 、 版 权 内 容 等 ， 以 及 其 他 侵犯 他 人 合法 知识 产权 的 。 





6.1.10 任何 召集 、 鼓 动 犯 罪 或 有 明显 违背 社会 善良 风俗 行为 的 。 


6.1.11 其 他 任何 违反 法 律 法 规 的 内 容 。 


6.2 ” 微 信 小 程序 的 内 容 ， 不 得 含有 以 下 违反 平台 规则 的 信息 : 


6.2.1 主要 为 营销 或 广告 用 途 (如 内 含 空白 广告 位 、 招 商 广告 等 ) ， 或 直接 出 现 漂浮 广告 。 





6.2.2 ”对 用 户 产 生 误导 、 严 重 破坏 用 户 体验 ， 损 害 用 户 利益 的 谣言 类 内 容 。 


6.2.3 ”小 游戏 、 测 试 类 内 容 。 








6.2.4 传播 骚扰 信息 、 恶 意 莒 销 和 垃圾 信息 等 的 。 
6.2.5 ”存在 违反 与 腾讯 签订 的 、 任 何 形式 的 服务 协议 、 平 台 协 议 、 功 能 协议 的 内 容 。 


6.2.6 ”存在 违反 腾讯 为 相关 软件 、 服 务 、 功 能 等 而 制定 的 管理 、 运 营 规 范 、 规 则 的 内 容 。 





6.2.7 ”其 他 涉及 违法 违规 或 违反 平台 相关 规则 的 内 容 。 





7. 用 户 产 生 内 容 规范 





71 ”未 经 用 户 允 许 ， 不 得 代替 用 户 发 表 内 容 。 








7.2 ， 微 信 小 程序 的 服务 提供 者 ， 应 设置 过 滤 违 法 、 违 规 等 不 当 信息 内 容 的 机 制 ， 保 证 用 户 产 生 内 容 符合 信息 内 容 的 规定 。 











7.3 ”被 投诉 微 信 小 程序 内 存在 不 当 内 容 时 ， 需 提供 及 时 回应 的 机 制 。 
8. 商 标 与 商业 外 观 
8.1 微 信人 小 程序 必须 遵守 商标 、 版 权 等 知识 产权 法 律 法 规 以 及 腾讯 关于 知识 产权 使 用 的 相关 规则 。 


8.2 ”使 用 他 人 商标 、 版 权 内 容 等 涉及 他 人 知识 产权 的 内 容 需要 在 帐号 申请 时 如 实说 明 ， 并 根据 要 求 提供 相关 权利 证 书 或 授权 证 明 等 。 非 权利 人 或 未 经 授权 的 ， 
不 得 使 用 他 人 享有 合法 知识 产权 的 内 容 。 


83 ” 非 腾讯 官方 帐号 ， 禁 止 在 帐号 名 称 、 输 出 内 容 中 出 现 与 腾讯 已 有 知识 产权 内 容 相同 (如 “腾讯 、 ' 微 信 、 ‘Tencent'、 ‘WeChat’ 、 
‘QQ’ 等 ) 、 相 近似 (例如 ， 腾 迅 、tencet、wecha 等 ) 的 字样 ， 或 者 容易 与 目前 已 有 腾讯 产品 设计 主题 、 外 观 等 相 混淆 的 内 容 。 








8.4“” 非 腾讯 公司 实际 运营 的 微 信 小 程序 ， 不 得 误导 和 上 暗示 用 户 腾 讯 公司 是 该 微 信 小 程序 运营 者 ,或 者 误导 和 上 暗示 用 户 腾 讯 公 司 以 任何 形式 表示 认可 其 质量 、 服 
务 或 与 其 存在 合作 关系 。 





9. 可 用 性 和 完整 性 规范 


9.1 提交 的 微 信 小 程序 应 该 是 一 个 完成 品 ， 要 求 可 以 打开 、 可 以 运行 ， 且 不 得 为 测试 版 。 





9.2 ” 微 信 小 程序 不 应 造成 微 信 客 户 端 崩 演 或 程序 本 身 前 演 。 


9.3 不 应 存在 严重 Bug (如 无 法 添加 和 打开 、 无 法 返回 和 退出 、 卡 顿 严重 等 ) 。 








94 开发 者 应 保证 已 发 布 微 信 小 程序 的 使 用 流畅 性 、 稳 定性 和 安全 性 ， 若 因 微 信 小 程序 自身 原因 导致 其 向 用 户 提供 的 服务 中 断 且 未 能 在 腾讯 认为 的 合理 期 限 内 
修复 的 ， 腾 讯 有 权 采 取 包 括 但 不 限于 临时 下 架 等 处 理 措施 ， 以 维护 良好 的 用 户 体验 。 





95 ”车 小 程序 中 存在 账号 关系 或 付费 内 容 ， 需 提供 测试 号 ， 包 含 账号 和 密码 ， 保 证 审核 者 可 以 体验 所 有 功能 。 


10. 用 户 隐私 和 数据 规范 





10.1 数据 收集 和 存储 


10.1.1 在 采集 用 户 数据 之 前 ， 必 须 确保 经 过 用 户 同意 ， 并 向 用 户 如 实 披露 数据 用 途 、 使 用 范围 等 相关 信息 。 





10.1.2 ”不 得 非法 收集 或 窃取 用 户 密码 或 其 他 个 人 数据 。 


10.1.3 ”除非 相关 法 律 要 求 ， 或 经 用 户 同意 ， 否 则 不 得 要 求 用户 输 入 个 人 信息 (手机 号 、 出 生日 期 等 ) 才 可 使 用 其 功能 ， 或 收集 用 户 密码 或 者 用 户 个 人 信息 ( 包 
括 但 不 限于 ， 手 机 号 、 身 份 证 号 、 生 日 、 住 址 等 ) 。 





10.1.4 若 用 户 要 求 ， 你 应 该 删除 接收 的 所 有 关于 该 用 户 的 数据 ， 除 非 依据 法 律 、 法 规 你 有 权 要 求 保留 这 些 数据 。 





10.1.5 “ 若 你 终止 使 用 微 信 小 程序 ， 则 应 立即 删除 从 微 信 和 微 信 小 程序 接收 的 所 有 用 户 数据 。 


10.2 数据 使 用 








10.2.1 不 允许 向 微 信 小 程序 其 他 用 户 或 任何 第 三 方 显示 用 户 微 信号 、 名 称 、QQ、 手 机 号 、 电 子 邮 箱 地址 和 出 生日 期 等 信息 。 





10.2.2 不 允许 将 用 户 微 信号 、 名 称 、QQ、 手 机 号 、 电 子 邮 箱 地 址 和 出 生日 期 等 信息 用 于 任何 未 经 用 户 及 微 信 平 台 授权 的 用 途 。 





10.2.3 不 允许 进行 反射 查找 、 跟 踪 、 关 联 、 挖 气 、 获 取 或 利用 用 户 微 信号 、 名 称 、QQ、 手 机 号 、 电 子 邮 箱 地 址 和 出 生日 期 等 信息 从 事 与 微 信 小 程序 所 公示 身 
份 无 关 的 行为 。 





10.24 不 允许 在 未 经 用 户 明确 同意 、 未 向 用 户 如 实 披露 数据 用 途 、 使 用 范围 等 相关 信息 的 情形 下 ， 复 制 、 存 储 、 使 用 或 传输 用 户 数据 。 








10.2.5 “通过 微 信 接 收 的 数据 ， 需 保持 数据 为 最 新 并 利用 这 些 数据 改善 微 信 小 程序 的 用 户 体验 。 











10.2.6 ”未 经 腾讯 公司 授权 或 多 许 ， 不 得 将 微 信 小 程序 的 数据 加 入 搜索 引 警 或 目录 ， 或 将 微 信 小 程序 搜索 功能 加 入 微 信 小 程序 。 





10.2.7 ”未 经 腾讯 公司 授权 或 允许 ， 不 得 使 用 从 微 信和 微 信 小 程序 接收 的 数据 用 以 做 出 有 关 资 格 的 决定 ， 包 括 决定 是 否 批准 或 拒绝 某 项 申请 ， 或 对 某 项 贷款 收取 
多 少 利息 等 。 





10.2.8 若 你 的 微 信 小 程序 主体 被 第 三 方 收购 或 合并 ， 则 你 从 微 信和 微 信 小 程序 接收 的 数据 仪 能 在 你 的 微 信 小 程序 内 继续 使 用 。 


10.3 ”数据 安全 


10.3.1 ”请 谨慎 保管 好 你 的 账号 、 密 码 和 密 钥 。 





























10.3.2 ” 若 使 用 第 三 方 合作 伙伴 服务 ， 那 么 应 与 合作 伙伴 签署 合同 ， 以 保护 你 从 微 信 获 取 的 任何 信息 ， 限 制 其 对 这 些 信息 的 使 用 并 保持 信息 的 保密 性 。 











10.3.3 不 得 要 求 用户 降 低 手机 操作 系统 安全 性 (如 要 求 iPhone 用 户 越狱 、Android 用 户 ROOT 等 ) 后 ， 方 能 使 用 相关 功能 。 


10.4 地理 位 置 


10.4.1 在 采集 、 传 送 或 使 用 地 理 位 置 数据 之 前 未 通知 并 获得 用 户 同 意 的 小 程序 ， 将 会 被 拒绝 。 


10.4.2 ”使 用 基于 地 理 位 置 的 API 用 于 车 辆 、 飞 机 或 其 他 设备 的 自动 控制 或 自主 控制 的 微 信 小 程序 将 会 被 拒绝 。 





10.4.3 ”使 用 基于 地 理 位 置 的 API 用 于 调度 、 车 队 管 理 或 应 急 服务 的 微 信 小 程序 将 会 被 拒绝 。 





10.4.4 地 理 位 置 数据 只 能 用 于 微 信 小 程序 提供 的 直接 相关 功能 或 服务 。 








11. 小 程序 支付 规范 


11.1 若 微 信 小 程序 内 存在 支付 行为 ， 需 在 微 信 小 程序 的 简介 中 有 明确 的 指示 。 


11.2 ”执行 支付 动作 前 ， 需 在 页 面 中 对 用 户 有 明确 的 提示 。 


11.3 ”未 经 腾讯 许可 ， 不 得 使 用 微 信 支 付 作为 捐款 和 募捐 。 








11.4 “在 微 信 小 程序 平台 使 用 支付 功能 的 ， 应 当 依 照 法 律 、 法 规 等 规范 性 文件 的 规定 开展 ， 不 得 实施 非法 吸收 公众 存款 、 集 资 诈骗 等 违法 犯罪 行为 ， 或 为 违法 
犯罪 行为 提供 协助 。 





11.5 ”使 用 微 信 支付 等 腾讯 提供 的 第 三 方 支付 工具 的 ， 需 遵守 《 微 信 支 付 服务 协议 》 和 《 微 信 支 付 用 户 服务 协议 》 等 服务 协议 和 平台 规则 。 





12. 技 术 实现 规范 


12.1 ”遵守 微 信 小 程序 开发 文档 和 开发 规范 中 的 规则 和 约定 。 





12.2 ” 微 信 小 程序 开发 者 允许 并 授权 微 信 团队 对 提交 的 代码 进行 漏洞 安全 测试 。 


12.3 ”系统 安全 要 求 


12.3.1 ”严禁 利用 手机 系统 、 微 信 或 其 他 软件 或 硬件 的 技术 漏洞 ， 一 旦 发 现 将 回收 微 信 小 程序 主体 的 账号 资格 。 





12.3.2 不 得 安装 或 运行 其 他 可 执行 代码 的 程序 。 


12.3.3 不 得 利用 微 信 小 程序 传播 病毒 。 


12.4 ” API 的 使 用 





12.4.1 不 得 使 用 非 公开 的 API 的 程序 。 





12.4.2 ”使 用 内 测 中 的 API 的 程序 ， 微 信 团 队 有 权 保 留 回收 接口 的 权利 。 


12.4.3 ”禁止 违规 (SEW) 使 用 其 他 第 三 方 应 用 的 API。 


12.4.4 ”未 经 腾讯 允许 ， 不 得 将 我 们 的 代码 、API 或 工具 出 售 、 转 让 或 转 授 给 他 人 。 

124.5 不 得 对 任何 SDK 或 组 件 进行 修改 、 转 译 或 进行 逆向 工程 ， 也 不 得 将 其 用 之 于 制作 衍生 产品 。 
12.5 ”其 他 要 求 

12.5.1 执行 多 任务 时 ， 使 用 后 台 服 务 仅 限 于 几 种 目的 : VolP、 音 频 播放 、 地 理 位 置 、 完 成 任务 以 及 本 地 提醒 等 。 
12.5.2 不 得 改变 原生 用 户 界面 元 素 和 行为 (如 音量 增 减 和 静音 开关 或 其 他 ) 。 

12.5.3 ”禁止 视频 、 音 乐 、 语 音 等 多 媒体 的 自动 播放 。 

12.5.4 不 得 在 用 户 不 知情 的 情况 下 ， 使 用 录音 功能 。 

12.6 ”授权 登录 

12.6.1 微 信 小 程序 内 存在 账号 体系 时 ， 必 须 提供 微 信 授 权 登 录 。 

12.6.2 ”如 果 用 户 选择 拒绝 授权 ， 你 可 以 在 用 户 表 现 出 向 你 授予 权限 的 意向 后 再 次 提醒 他 们 。 
12.6.3 ”应 提供 功能 正常 且 易 于 发 现 的 “退出 ”选项 。 

12.6.4 用 户 拒绝 授权 后 ， 开 发 者 有 义务 清除 并 不 再 继续 使 用 该 用 户 的 微 信 头 像 、 昵 称 等 数据 。 
12.7 文件 下 载 

12.7.1 ” 需 显 式 提示 用 户 ， 使 用 uploadfile 接 口上 传 文 件 ， 不 得 重复 多 次 上 传 相同 文件 。 
12.7.2 ”在 移动 网 络 下 ， 不 得 在 用 户 不 知情 的 情况 下 ， 使 用 downloadfile 接 口 下 载 过 多 文件 。 
128 ”模板 消息 

12.8.1 ”模板 消息 的 使 用 ， 必 须 遵 守 微 信 小 程序 模板 消息 规范 。 

12.8.2 不 得 恶意 诱导 用 户 进 行 触发 操作 ， 以 达到 可 向 用 户 下 发 模板 目的 。 

12.8.3 ”不 得 恶意 骚扰 ， 下 发 对 用 户 造成 骚扰 的 模板 。 

128.4 不 得 恶意 营销 ， 下 发 营销 目的 的 模板 。 

13. 小 程序 UI 规范 

13.1 应 符合 微 信 小 程序 设计 规范 。 

13.2 ”遵守 微 信 的 外 观 和 功能 ， 不 得 提供 改变 微 信 外 观 和 功能 的 用 户 体验 。 


13.3 ”保持 所 有 图 片 文本 简洁 ， 不 可 使 用 文本 遮挡 图 片 。 


H 


13.4 icon 建议 使 用 有 色 背 景 。 





ql 


13.5 ” 微 信 小 程序 页 面 内 的 浮 层 和 弹 窗 应 可 关闭 。 
13.6 不 得 模仿 系统 通知 或 警告 诱导 用 户 点 击 。 


13.7 “小 程序 的 页 面 在 下 拉 时 ， 账 号 字样 应 清晰 可 见 ， 不 得 使 用 背景 色 遮 挡 账号 名 称 。 


A.3 ”投诉 与 处 罚 规范 


微 信人 小 程序 平台 已 启用 用 户 投诉 处 理 机 制 ， 我 们 会 根据 用 户 的 投诉 ， 视 违规 程度 予以 不 同 程度 的 处 罚 措施 。 


AA ”遵守 当地 法 律 监管 





你 在 使 用 微 信 小 程序 平台 服务 的 过 程 中 应 当 遵 守 当地 相关 的 法 律 法 规 ， 并 尊重 当地 的 道德 和 风俗 习惯 。 如 果 你 的 行为 违反 了 当地 法 律 法规 或 道德 风俗 ， 你 应 当 
为 此 独立 承担 责任 。 











微 信 小 程序 开发 者 应 避免 因 使 用 本 服务 而 使 腾讯 卷 入 政治 和 公共 事件 ， 否 则 腾讯 有 权 和 暂停 或 终止 对 你 的 服务 。 


AS “小 程序 平台 运营 规范 免责 声明 


微 信 小 程序 开发 者 明确 了 解 并 同意 ， 关 于 微 信 小 程序 服务 腾讯 不 提供 任何 种 类 的 明示 或 暗示 担保 或 条 件 ， 包 括 但 不 限于 商业 适 售 性 、 特 定 用 途 适 用 性 等 。 你 对 
微 信 小 程序 的 使 用 行为 必须 自行 承担 相应 风险 。 


A6 动态 文档 


这 是 一 份 动态 更 新 的 文档 ， 我 们 会 根据 新 出 现 的 问题 、 相 关 法 律 法 规 更 新 或 产品 运营 的 需要 来 对 其 内 容 进 行 修改 并 更 新 ， 制 定 新 的 规则 ， 保 证 微 信用 户 的 体 
验 。 你 应 能 反复 查看 以 便 获 得 最 新 信息 ， 请 定期 了 解 更 新 情况 。 





附录 B 微 信 小 程序 平台 常见 拒绝 情形 


除 本 微 信 小 程序 平台 常见 拒绝 情形 外 ， 开 发 者 还 应 遵守 《 微 信 小 程序 平台 服务 条 款 》 及 腾讯 公布 的 相关 规则 、 规 范 。 
B.1 账号 基本 信息 


1. 小 程序 名 称 、 简 介 、logo、 服 务 范围 、 服 务 标签 、 账 号 基本 信息 文字 均 不 得 : 


1) 侵犯 他 人 权益 (著作权 、 商 标 权 、 肖 像 权 、 名 誉 权 等 ) 。 包 括 但 不 限于 ， 使 用 或 包含 不 属于 该 小 程序 主体 的 品牌 或 商标 、 标 识 等 内 容 或 与 之 相似 的 内 容 、 信 
息 、 特 殊 角 标 。 示 例 : 检查 名 称 、 简 介 中 是 否 含有 该 小 程序 不 属于 该 账号 的 权益 。 











2) 含有 商业 化 用 语 的 、 热 门 小 程序 名 称 、“ 国 家 级 ”、 “最 高 级 ”等 新 广告 法 明令 禁止 或 其 他 无 关 的 词语 。 





3) 含有 政治 、 色 情 、 敏 感 、 暴 力 血 腥 、 丽 怖 、 其 他 国家 法 律 法 规 茜 止 的 词汇 及 违法 内 容 。 
2. 特 别 规则 
2.1 小 程序 名 称 、 简 介 : 


1) 小 程序 的 简介 需 明确 介绍 小 程序 的 功能 点 ， 不 能 使 用 模糊 的 词义 表达 ， 比 如 ， 该 小 程序 旨 在 提高 用 户 的 生活 品味 、 该 小 程序 旨 在 提高 用 户 的 购物 体验 。 示 





2) 名 称 、 简 介 的 信息 表达 的 意思 必须 有 关联 ， 具 有 一 致 性 ， 并 应 与 实际 提供 的 功能 一 致 ， 不 含有 与 功能 无 关 的 搜索 热 词 。 示 例 : 简介 中 能 找到 小 程序 名 称 或 者 
分 拆 出 来 的 词汇 。 





3) 小 程序 名 称 不 能 以 电话 、 邮 件 、 日 历 等 广义 归纳 类 、 普 遍 且 不 具有 识别 性 词语 来 命名 。 示 例 : 名 称 不 是 单词 汇 ， 必 须 是 两 个 词 以 上 的 组 合 ， 当 无 法 判断 时 ， 
审核 人 员 可 主观 判断 。 


2.2 ”小 程序 头像 logo: 
1) 小 程序 头像 logo 清 晰 度 不 够 时 ， 不 予 通过 。 示 例 : 无 法 看 清 、 分 辨 、 识 别 图 片 中 包含 的 各 个 元 素 ， 如 文字 、 物 体 、 形 状 等 。 


2) 小 程序 头像 logo 应 与 名 称 、 简 介 保持 一 致 





2.3 ”小 程序 的 服务 范围 和 服务 标签 : 小 程序 所 设置 的 服务 标签 ， 应 与 所 选 的 服务 范围 保持 一 致 。 标 签 不 能 超出 服务 范围 。 示 例 : 服务 范围 是 家 政 ， 服 务 标签 是 
美食 。 


B.2 ”服务 类 目 审核 


服务 类 目 是 指 开发 者 按照 小 程序 所 提供 的 服务 类 型 和 所 涉及 的 服务 内 容 ， 在 平台 提供 的 分 类 分 级 表格 中 选择 对 应 的 行业 范围 。 
1. 小 程序 的 类 目 要 和 自身 所 提供 的 服务 一 致 。 

1.1 小 程序 服务 类 目 所 对 应 的 页 面 中 的 核心 内 容 必 须 与 该 类 目 一 致 。 

1.2 ”必须 保证 用 户 在 该 页 面 能 使 用 该 服务 类 目 ， 不 得 隐藏 ， 不 得 进行 多 次 跳 转 。 


2. 小 程序 的 服务 类 目 链接 使 用 正常 ， 不 存在 违法 违规 或 不 符合 与 腾讯 所 签署 的 相关 协议 、 腾 讯 公布 的 相关 规则 、 规 范 等 内 容 。 


示例 : 


1) 小 程序 服务 类 目 所 对 应 的 页 面 链接 不 能 正常 打开 。 


2) 小 程序 服务 类 目 所 对 应 的 页 面 链接 加 载 非 法 信息 。 


3) 小 程序 服务 类 目 所 对 应 的 页 面 链接 加 载 恶意 、 色 情 广告 。 





4) 小 程序 服务 类 目 所 对 应 的 页 面 链接 加 载 侵犯 他 人 权益 的 内 容 ; 含有 商业 化 用 语 的、 热门 小 程序 名 称 、“ 国 家 级 ”、 “最 高 级 ”等 新 广告 法 明令 禁止 或 其 他 无 
关 的 词语 、 不 含有 政治 、 色 情 、 敏 感 、 暴 力 血 腥 、 恐 怖 、 其 他 国家 法 律 法 规 禁止 的 词汇 及 其 他 违法 内 容 。 








B.3 ”小 程序 整体 审核 规则 
1. 小 程序 基本 功能 审核 规范 
1.1 小 程序 所 实际 提供 的 功能 点 ， 需 与 小 程序 的 简介 一 致 。 示 例 : 功能 包括 但 不 限于 简介 中 提炼 的 功能 点 ; 


1.2 “小 程序 所 提供 的 所 有 服务 类 目 功 能 ， 必 须 在 小 程序 首页 得 到 体现 ， 即 在 小 程序 首页 必须 能 直达 或 者 经 过 2 次 点 击 到 达 所 有 本 文档 2 (服务 类 目 审核 ) 中 提交 
的 服务 类 目 页 面 ; 





1.3 ”小 程序 实际 所 提供 的 服务 不 得 属于 尚未 开放 的 服务 范围 。 不 应 超出 小 程序 平台 已 开放 的 类 目 库 范围 。 示 例 : 游戏 、 直 播 功能 尚未 开放 。 


14 小 程序 中 若 存在 隐藏 或 付费 功能 (比如 仅 充 值 可 见 ， 仪 会 员 可 见 等 受 限 功能 点 ) ， 该 功能 的 实现 不 得 含有 色情 、 暴 力 、 政 治 敏感 或 其 他 违法 违规 内 容 ， 开 
发 者 提供 的 测试 号 需 可 完整 呈现 和 体验 该 功能 ; 





1.5 “小 程序 的 功能 应 具有 使 用 价值 ， 不 能 过 于 简单 ， 示 例 : 只 有 一 个 页 面 ， 只 有 一 个 按钮 ; 


1.6 “未 经 腾讯 公司 授权 的 情况 下 ， 不 得 在 小 程序 中 提供 与 微 信 客户 端 功能 相同 或 类 似 的 功能 ， 示 例 : 小 程序 功能 不 能 包含 朋友 圈 、 漂 流 瓶 等 。 








1.7 ”在 未 经 允许 或 未 经 腾讯 公司 授权 的 情况 下 ， 不 得 展示 和 推荐 第 三 方 小 程序 。 示 例 : 不 能 做 小 程序 导航 ， 不 能 做 小 程序 链接 互 推 ， 小 程序 排行 榜 等 。 
1.8 小 程序 功能 的 使 用 ， 无 需 以 关注 或 使 用 其 他 号 为 条 件 。 示 例 : 使 用 A 小 程序 时 ， 必 须 同 时 使 用 B 小 程序 。 


2. 小 程序 页 面 内 容 审核 规范 








2.1 小 程序 的 页 面 内 容 中 ， 存 在 诱导 类 行为 ， 包 括 但 不 限于 诱导 分 享 、 诱 导 添 加 、 诱 导 关 注 公 众 号 、 诱 导 下 载 等 ， 要 求 用 户 分 享 、 添 加 、 关 注 或 下 载 后 才 可 操 
作 的 程序 ， 含 有 明示 或 暗示 用 户 分 享 的 文案 、 图 片 、 按 钮 、 浮 层 、 弹 窗 等 的 小 程序 ， 通 过 利益 诱惑 诱导 用 户 分 享 、 传 播 的 小 程序 ， 用 夸张 言语 来 胁迫 、 引 诱 用 户 分 
享 的 小 程序 ， 强 制 或 诱导 用 户 添加 小 程序 的 ， 都 将 会 被 拒绝 ; 





2.2 ”小 程序 的 页 面 内 容 中 ， 主 要 为 营销 或 广告 用 途 (如 内 含 空白 广告 位 、 招 商 广告 等 ) ， 将 会 被 拒绝 ;示例 : 漂浮 悬浮 广告 ， 含 有 功能 使 用 的 页 面 中 的 广告 展 
示 比 例 超过 50%， 广 告 遮 挡 功 能 。 


23 ”小 程序 的 页 面 内 容 中 ， 存 在 对 用 户 产 生 误 导 、 引 发 用 户 求 惧 心理 、 严 重 破坏 用 户 体验 或 损害 用 户 利益 的 谣言 类 等 内 容 的 ， 将 会 被 拒绝 ; 


24 小 程序 的 页 面 内 容 中 ， 不 能 存在 测试 类 内 容 ; 示例 : 算命 ， 抽 签 ， 星 座 运势 等 。 








2.5 “小 程序 的 页 面 内 容 中 不 能 存在 虚假 、 欺 诈 类 内 容 ， 包 括 但 不 限于 虚假 红包 、 虚 假 活动 、 宣 传 或 销售 侵害 他 人 合法 权益 的 商品 ， 仿 冒 腾讯 官方 或 他 人 业务 ， 
其 他 可 能 造成 微 信 用 户 混淆 的 内 容 和 服务 等 ; 









































2.6 “小 程序 的 页 面 中 不 能 含有 传播 骚扰 信息 、 广 告 信息 和 垃圾 信息 等 内 容 ; 





2.7 ”小 程序 的 页 面 中 不 得 含有 可 能 违反 与 腾讯 签订 的 、 任 何 形式 的 服务 协议 、 平 台 协 议 、 功 能 协议 的 内 容 ; 
28 ”含有 发 布 、 传 送 、 传 播 、 储 存 违反 国家 法 律 法 规 的 或 含有 以 下 信息 内 容 的 ， 将 会 被 拒绝 : 
2.8.1 反对 完 法 所 确定 基本 原则 的 ， 危 害 国 家 安全 、 泄 露 国家 秘密 、 颠 履 国 家 政权 、 破 坏 国家 统一 、 损 害 国家 荣誉 和 利益 的 小 程序 ; 


2.8.2 ”任何 带 有 虚假 、 欺 诈 内 容 等 的 小 程序 不 予 通过 ; 





2.8.3 ”任何 召集 、 推 销 、 鼓 动 犯罪 或 有 明显 侵犯 社会 善良 风俗 行为 的 小 程序 不 予 通过 ; 
2.8.4 任何 包含 法 律 法 规 茜 止 传播 内 容 的 小 程序 不 予 通过 ; 


28.5 “小 程序 内 容 包含 反 政 府 、 反 社会 或 不 符合 主流 政治 的 行为 的 ， 或 存在 煽动 性 的 涉 政 言论 或 国家 法 律 禁止 的 内 容 的 ， 或 含有 散布 谣言 ， 扰 乱 社会 秩序 ， 破 
坏 社会 稳定 信息 的 ， 不 予 通 过 ; 








2.8.6 ”小 程序 内 容 不 能 含有 色情 素材 ( 即 则 在 激发 情欲 ， 对 性 器 官 或 性 行为 的 明确 描述 或 展示 ， 而 无 关 美学 ) ， 或 存在 涉嫌 宣扬 传播 淫秽 、 色 情 内 容 信息 ， 包 
括 暴 圳 图片、 挑逗 内 容 等 的 ,或 包含 非法 色情 交易 的 信息 ; 








2.8.7 ”小 程序 内 容 不 能 包含 炉 动 民族 仇恨 、 民 族 歧视 、 破 坏 民族 团结 的 内 容 、 破 坏 国家 宗教 政策 、 宣 扬 有 邪教 和 封建 迷信 的 ; 


2.8.8 小 程序 内 容 不 能 包含 展示 人 或 动物 被 杀 残 、 致 眶 、 枪 击 、 针 刺 或 其 他 伤害 的 真实 图 片 ， 描 述 暴 力 或 虐待 儿童 的 ， 或 包含 宣扬 暴力 血腥 内 容 的 ， 或 包含 侮 
辱 或 者 诽谤 他 人 ， 侵 害 他 人 合法 权益 信息 的 ， 将 会 被 拒绝 ; 





2.8.9 小 程序 内 容 不 能 包含 赌博 、 况 猜 和 抽奖 的 。 
2.9 ”小 程序 内 的 图 片上 不 能 含有 广告 、 网 址 或 虚假 内 容 。 
2.10 ”小 程序 代替 用 户 发 表 、 发 送 、 转 交 任何 内 容 前 ， 必 须 征 得 用 户 明确 同意 和 授权 。 


2.11 小 程序 的 服务 提供 者 必须 提供 过 滤 不 当 内 容 的 措施 。 示 例 : 设置 对 发 布 色情 、 赌 博 等 涉嫌 违法 违规 的 词汇 进行 过 滤 提 示 的 措施 。 




















2.12 小 程序 页 面 中 不 能 存在 误导 和 错误 暗示 腾讯 公司 与 该 小 程序 有 任何 合作 、 投 资 、 背 书 关系 的 内 容 ， 例 如 误导 和 错误 暗示 腾讯 公司 是 该 小 程序 运营 者 ， 或 
者 误导 和 错误 暗示 腾讯 公司 以 任何 形式 表示 认可 其 质量 、 服 务 或 与 其 存在 合作 关 而 该 小 程序 事实 上 并 非 为 腾讯 公司 运营 。 




















3. 可 用 性 和 完整 性 











3.1 提交 的 小 程序 须 是 一 个 完成 品 ， 要 求 可 以 打开 ， 可 以 运行 ， 且 不 可 以 是 一 个 测试 版 。 示 例 : 不 可 运行 、 存 在 崩溃 、 闪 退 、 按 钮 没有 响应 、 文 字 表述 不 完整 








3.2 ”本 身 会 朋 溃 ， 或 小 程序 程序 会 造成 微 信 客户 端 册 溃 的 ， 将 会 被 拒绝 。 


3.3 存在 严重 Bug 的 小 程序 (如 无 法 添加 和 打开 、 无 法 返回 和 退出 、 卡 顿 严重 等 ) ， 将 会 被 拒绝 。 





34 若 小 程序 中 存在 账号 体系 ， 需 提供 测试 号 ， 包 含 账号 和 密码 (可 以 体验 所 有 功能 ) 。 





4. 用 户 隐 私 和 数据 安全 








4.1 在 收集 和 使 用 用 户 任何 数据 时 ， 必 须 明 确 告知 用 户 该 数据 的 用 途 ， 确 保 经 过 用 户 明确 同意 和 授权 ， 并 应 在 用 户 同意 和 授权 的 范围 内 进行 合理 使 用 。 在 用 户 
注销 账号 后 应 相应 删除 相关 数据 。 数 据 包 括 但 不 限于 获取 地 理 位 置 、 用 户 通讯 录 、 用 户 手机 号 码 等 。 

















4.2 不 得 在 小 程序 任何 页 面 请 求 或 诱导 用 户 输入 微 信用 户 的 用 户 名 或 密码 。 


4.3 不 得 将 搜索 小 程序 功能 加 入 小 程序 。 

















44 不 得 在 页 面 中 进行 或 将 通过 小 程序 收集 到 的 用 户 数据 私下 进行 出 售 、 转 交 、 交 易 、 越 权 披露 或 泄露 。 





45 不 得 在 未 经 用 户 授权 同意 的 情况 下 ， 显 示 用 户 相 关 数 据 ， 比 如 ， 头 像 ， 了 昵称 等 信息 。 





4.6 “小 程序 不 得 要 求 用 户 降低 手机 操作 系统 安全 性 (如 要 求 iPhone 用 户 越狱 、Android 用 户 ROOT 等 ) 后 ， 方 能 使 用 相关 功能 。 
47 ” 若 小 程序 有 需要 追踪 用 户 的 地 理 位 置 的 功能 ， 则 必须 提供 退出 该 位 置 追 踪 的 功能 和 明确 指示 。 

5. 技 术 实 现 规范 性 

5.1 需要 提供 小 程序 文档 和 说 明 。 

5.2 ”禁止 视频 、 音 乐 、 语 音 等 多 媒体 的 自动 播放 。 

5.3 ”安装 或 运行 其 他 可 执行 代码 的 程序 ， 将 会 被 拒绝 。 

5.4 ”违规 加 载 或 更 新 代码 ， 将 会 被 拒绝 。 

5.5 ”如 果 小 程序 有 账户 系统 ， 必 须 提供 能 正常 使 用 且 易 于 发 现 的 “退出 ”账户 选项 。 

6.UI 规 范 


6.1 符合 WeApp UI 规 范 。 





6.2 ”小 程序 页 面 内 的 浮 层 和 弹 窗 可 关闭 。 
6.3 ”小 程序 的 界面 必须 遵守 微 信 的 外 观 和 功能 ， 不 得 提供 改变 微 信 外 观 和 功能 的 产品 体验 。 


6.4 ”小 程序 的 界面 不 得 模仿 系统 通知 或 警告 诱导 用 户 点 击 。 


6.5 “小 程序 头像 logo 需 使 用 透明 或 有 色 背 景 。 若 使 用 白色 背景 ， 需 使 用 有 色 边 框 。 


附录 C ”沟通 联络 方法 








微 信 小 程序 开发 者 在 开发 过 程 中 有 任何 疑问 ， 可 以 邮箱 联系 微 信 开发 支持 团队 : weixin_developer@qq.com 或 本 书 作 者 : wxapp@6ean.com， 为 方便 定位 原 
因 并 快速 解答 开发 者 的 问题 ， 开 发 者 应 该 提供 足够 多 的 环境 信息 ， 包 括 但 不 限于 以 下 信息 : 





“ 公司 名 称 


< mp 账户 


-FRAMES 


+ 机 型 


-操作 系统 


AFLI 


“ 出 现时 间 


- 操作 路 径 


”问题 描述 


:问题 截图 





: 代码 片段 截图 





